H5移動端ios/Android兼容性總結

之前作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. 用fastclick，https://github.com/ftlabs/fas...
3. 用preventDefault阻止a標籤的click
4. 延遲必定的時間(300ms+)來處理事件 （不推薦）
5. 以上通常都能解決，實在不行就換成click事件。

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

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