資訊專欄INFORMATION COLUMN
摘要：在為移動設備制作網(wǎng)頁的過程中，你可能會遇到下述奇怪的現(xiàn)象當你為一個按鈕設置樣式，并在瀏覽器打開模擬器查看效果時，一切都很美好。別怕，我們有兩個非?？孔V的樣式聲明可以告知瀏覽器完全拋棄控件默認的樣式，以正常的方式計算我們的樣式表。
在為移動設備制作網(wǎng)頁的過程中，你可能會遇到下述奇怪的現(xiàn)象：當你為一個按鈕設置樣式，并在瀏覽器打開模擬器查看效果時，一切都很美好。
但當你使用真機測試時，你的按鈕卻變成了下面這個樣子：
而且即使你使用終極禁術(shù) border-radius: 0 !important 也還是沒用。
這是因為在移動設備中，各瀏覽器為一些基本控件（button，checkbox，scrollbarbutton-up）提供了一套符合原生系統(tǒng)界面風格的樣式，這些樣式是隱藏的，但優(yōu)先級卻是最高的，高到你即使使用禁術(shù) !important 也無法超越。
這顯然不科學。
別怕，我們有兩個非常靠譜的樣式聲明可以告知瀏覽器完全拋棄控件默認的樣式，以正常的方式計算我們的樣式表。
這兩個聲明分別是：
-moz-appearance: none：用來取消基于 Gecko 引擎的瀏覽器（如Firefox）所提供的原生系統(tǒng)控件樣式；
-webkit-appearance: none：用來取消基于 Webkit （如 Safari）和 Blink（如Chrome，Opera）引擎的瀏覽器所提供的原生系統(tǒng)控件樣式；
所以，你明白當你遇到文章開篇出現(xiàn)的奇怪現(xiàn)象應該怎么做了吧？直接兩個聲明走起啊少年！
最后，你也許會好奇，appearance 還有什么屬性值，戳這里看看MDN上怎么說吧。
PS: 戳這里，發(fā)現(xiàn)更多可能。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115719.html
摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。 隨著移動互聯(lián)網(wǎng)的發(fā)展，移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...
摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。 隨著移動互聯(lián)網(wǎng)的發(fā)展，移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...
摘要：一思考在移動端越來越重要的背景下，每位開發(fā)者對移動適配都有自己的想法。這個和移動端的設計體驗方式是比較像的。對移動端的特殊性進行適配，如問題，默認樣式等。 一、思考 在移動端越來越重要的背景下，每位web開發(fā)者對移動適配都有自己的想法。是移動優(yōu)先，還是PC優(yōu)先，還是兩者兼得？在實際開發(fā)中這個問題是和項目產(chǎn)品定位有關(guān)的，也涉及到UI的設計，不是開發(fā)者能決定。但不管產(chǎn)品如何定位，作為開發(fā)...
摘要：基礎知識頁面窗口自動調(diào)整到設備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識別為電話號碼忽略平臺中對郵箱地址的識別當網(wǎng)站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎知識H5頁面窗口自動調(diào)整到設備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識別為電話號碼 忽略Android平臺中對郵箱地址的識別 當網(wǎng)站添加到主屏幕快...
閱讀 2870·2021-10-14 09:42
閱讀 3184·2019-08-30 15:52
閱讀 3274·2019-08-30 14:02
閱讀 1114·2019-08-29 15:42
閱讀 540·2019-08-29 13:20
閱讀 1166·2019-08-29 12:24
閱讀 486·2019-08-26 10:20
閱讀 688·2019-08-23 18:31
