清除手機瀏覽器默認樣式 問題積累

一、IOS上長按連接或者圖片會默認彈出系統菜單，-webkit-touch-callout 能夠禁止這個菜單的彈出（菜單默認是開啓的），安卓不起做用

a,img {

-webkit-touch-callout: none;

}

二、禁止選擇文本（若是沒有選擇文本須要，建議最好加上）

html,

body {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

三、避免屏幕旋轉致使字體大小縮放

body {

-webkit-text-size-adjust: 100%;

}

四、透明度設置爲0，去掉點擊連接和文本框對象時默認的灰色半透明覆蓋層(iOS)或者虛框(Android)

body {

-webkit-tap-highlight-color: rba(255, 255, 255, 0);

}

利用此屬性，設置touch時連接區域高亮爲50%的透明紅，只在ios上起做用。android上只要使用了此屬性就表現爲邊框。在body上加此屬性，這樣就保證body的點擊區域效果一致了

body {

-webkit-tap-highlight-color: rba(255, 255, 255, 0);

}

五、隱藏地址欄

settTimeout(function (){

window.scrollTo(0, 1);

}, 0);

六、開啓電話、短信功能

// 電話

<a href="tel:10086">10086</a>

// 短信

<a href="sms:10086">10086</a>

// 郵箱

<a href="mailto:example@gmai.com">example@gmail.com</a>

七、判斷屏幕方向

switch (window.orientation){

case -90:

case 90:

alert("橫屏:" + window.orientation);

break;

case 0:

case 180:

alert("豎屏:" + window.orientation);

break;

}

八、關閉 IOS 輸入框首字母大寫

<input type="text" autocapitalize="off" />

九、關閉 IOS 輸入自動修正

<input type="text" autocorrect="off" />

10.關閉 IOS 自動電話識別

<meta name="format-detection" content="telephone=no" />

11.想要去除文本框的默認樣式可使用-webkit-appearance，

-webkit-appearance: none;//消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式

聚焦時候默認樣式的取消是-webkit-tap-highlight-color。

12-webkit-overflow-scrolling

-webkit-overflow-scrolling:touch;// 局部滾動(僅iOS 5以上支持)

一， 樣式問題

問題1： 適配Android 4.1 placeorder問題 對不齊，設置 height == line-height 無用

解決：line-height: normal;

問題2： 呼出 iOS 數字鍵盤

解決： 設置 input 的 type＝"tel"

問題3： 去掉 input 首字母大寫及聯想功能

解決： <input autocomplete="off" autocorrect="off" />

問題4： Android 下 input focus 高亮外框沒法消除

解決：

textarea, input{

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-user-modify: read-write-plaintext-only;

outline: none !important;

}

問題5： OPPO input:button 或者 button 元素設置了圓角 border-radius 並設置了背景色時沒法蓋住背景色

解決： background-clip: padding-box;

問題6： 阻止被特定區域擋住的 DOM 元素響應事件

解決： pointer-events: none; 若是該特定區域內部須要響應事件，則將內部元素設置爲 pointer-events: auto;

問題7： 禁止 iOS 呼出菜單/保存圖片/新窗口打開連接/完全乾掉點擊效果

解決： -webkit-touch-callout: none;