以前做pc端，也會遇到相容性的問題，不過說實話，腦海裡全是ie的問題，並沒有什麼可特別注意的，可能是我不善總結，現在做移動端（本來覺得移動端很easy，所以沒放在眼裡），so，我錯了，我為自己的輕視高傲買單！

最近就遇見了一些相容性bug，從網上找了資料。 我覺得值得一寫的，我都有試過的內容。

先說一下viewport

先上模板

<meta charset="utf-8">
<!--主要I是強制讓文件的寬度與裝置寬度保持1:1，最大寬度1.0，禁止螢幕縮放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--這個也是iphone私有標籤，允許全屏瀏覽。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有標籤，iphone頂端狀態條的樣式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email識別-->
<meta content="email=no" name="format-detection">
 

• 寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳

禁止複製、選中文字

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

蘋果手機固定定位有bug 檢查html和body是不是設定了overflow-x:hidden;

給不同螢幕大小的手機設定特殊樣式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}
 

IOS中input鍵盤事件keyup、keydown、keypress支援不是很好, 用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中用輸入法輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才可以響應

方法：可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>
 

ios 設定input 按鈕樣式會被預設樣式覆蓋

解決方式如下：

input,textarea {
  border: 0;
  -webkit-appearance: none;
}

消除 IE10 裡面的那個叉號:input:-ms-clear{display:none;}

手機上的flex佈局時會有相容性問題，只用新版本的會出現安卓手機不識別的現象

flex佈局對於低版本的安卓，不支援flex-wrap:wrap屬性，但是ios系統支援換行屬性，這個時候如何解決呢？當然是不使用換行，用其他方式代替。

.box{
    display: -webkit-box; 
    /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本語法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本語法: IE 10 */
    display: -webkit-flex; /* 新版本語法: Chrome 21+ */
    display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}

input 的placeholder屬性會使文字位置偏上

line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動端解決方法

input type=number之後，pc端出現上下箭頭

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

實現android和ios系統手機開啟相機並可選擇相簿功能

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>


$(function () {
    //獲取瀏覽器的userAgent,並轉化為小寫
    var ua = navigator.userAgent.toLowerCase();
    //判斷是否是蘋果手機，是則是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，由於自動播放網頁中的音訊或視訊，會給使用者帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由使用者來觸發才可以播放。

解決方法思路：先通過使用者 touchstart 觸碰，觸發播放並暫停（音訊開始載入，後面用 JS 再操作就沒問題了）。

解決程式碼：

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

移動端 video在部分android機播放之後浮在最上層，設定z-index無效

這個目前沒有好的辦法解決 情景一：頁面有視訊，點選頁面按鈕顯示彈出層（比如讓使用者輸入使用者資訊），這時候視訊會出現在彈出層上面，是不是很-d疼？ 方案：點選按鈕時候把video隱藏hide，關閉彈出層show，過程中視訊聲音還在 情景二：頁面很長，往下翻滾時，視訊在播放，脫離文件流 方案：頁面滾動到某一合適位置把video隱藏hide，回滾到某一位置show，過程中視訊聲音還在 有些說position可以解決，我沒有試

關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

this.value = this.value.replace(/\u2006/g,'');

關於 iOS 與 OS X 端字型的優化(橫豎屏會出現字型加粗不一致等)

iOS 瀏覽器橫屏時會重置字型大小，設定 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字型縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。

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

移動端點選300ms延遲

原因：瀏覽器興起初期，為了判斷使用者是雙擊還是單擊，就設定了一個時間段300ms，使用者單擊後300ms後做事件處理，如果在300ms內連續點選，就判斷為雙擊，做雙擊處理事件。 所以現在用click繫結事件呢，就會有300ms延遲的問題。 300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致使用者體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。

推薦兩個js，一個是fastclick，一個是tap.js

移動端點透問題

案例如下：

<div id="haorooms">點頭事件測試</div>
<a href="www.baidu.net">www.baidu.com</a>

div是絕對定位的蒙層,並且z-index高於a。而a標籤是頁面中的一個連結，我們給div繫結tap事件：

$('#haorooms').on('tap',function(){
    $(this).hide();
});

我們點選蒙層時 div正常消失，但是當我們在a標籤上點選蒙層時，發現a連結被觸發，這就是所謂的點透事件。

原因：

touchstart 早於 touchend 早於click。 亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之後蒙層隱藏， 此時 click還沒有觸發，300ms之後由於蒙層隱藏，我們的click觸發到了下面的a連結上。 解決：

1. 儘量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
2. 用preventDefault阻止a標籤的click
3. 延遲一定的時間(300ms+)來處理事件 （不推薦）
4. 以上一般都能解決，實在不行就換成click事件。

下面介紹一下touchend事件，如下：

$("#haorooms").on("touchend",function(event) {
   event.preventDefault();
 });