移動端兼容性處理1

移動端 HTML5 audio autoplay 失效問題

因爲自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者沒必要要的流量消耗，因此蘋果系統和安卓系統一般都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才能夠播放。

解決方法：

先經過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）。

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

 

Fixed錯誤

浮動（固定）的元素，在瀏覽器窗口大小改變（輸入鍵盤彈出關閉），交互時，定位屬性會變得異常。位置錯位或者消失等等。

影響：

全部移動瀏覽器。

解決方法：

1. 複雜交互頁面儘可能避免fixed元素。
2. 在input元素頁面，禁止使用fixed元素。

 

Video全屏Zindex失效

zindex無效，視頻video始終在最上方。

影響：

不少國內瀏覽器不兼容

解放方法：

設計時避免視頻元素與其餘元素可能會出現的重疊問題。

 

IOS裏點擊select標籤,瀏覽器會退出

當<select>裏沒有<option>標籤的時候,用戶點擊<select>,瀏覽器會強制退出。

影響：IOS系統的瀏覽器

解決方法：

在<select>里加入<option>元素,保證有元素存在。

 

js使用touchstart事件無法調用手機鍵盤

js使用touchstart事件，對錶單使用focus( )方法,對錶單得到焦點,沒辦法調用手機的鍵盤。

影響：

Android系統的瀏覽器。

解決方法：

改用js的onclick事件

 

iOS Safari 委託事件綁定在document的事件失效

Safari瀏覽器下對document進行委託事件的綁定，會失效。

影響：

Safari 對click事件定義只能冒泡到body下面的子節點，因此委託在document上得click事件不會被觸發。

解決方法：

爲body的子節點添加click事件能夠解決。

 

Android中元素被點擊時產生的邊框

點擊一個連接，會出現一個邊框或者半透明灰色遮罩。

影響：

android手機

解決方法：

設置`-webkit-tap-highlight-color`的alpha值爲0去除部分機器自帶的效果。

 

去除移動端輸入框內陰影

在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉。

影響：

ios系統的手機

解決方法：

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

　

禁止選中內容

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉。

.div {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移動端不須要） */
  -ms-user-select: none;      /* IE 10+ */     
}