移動端兼容性問題解決方案

1. IOS移動端click事件300ms的延遲響應

移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。這是因爲區分單擊事件和雙擊屏幕縮放的歷史緣由形成的,

2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放(double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。

解決方案：

• fastclick能夠解決在手機上點擊事件的300ms延遲
• zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
• 觸摸事件的響應順序爲 touchstart --> touchmove --> touchend --> click,也能夠經過綁定ontouchstart事件，加快對事件的響應，解決300ms延遲問題

2.一些狀況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發，css增長cursor:pointer就搞定了。

3. 三星手機遮罩層下的input、select、a等元素能夠被點擊和focus(點擊穿透)

問題發現於三星手機，這個在特定需求下才會有，所以若是沒有相似問題的能夠不看。首先需求是浮層操做，在三星上被遮罩的元素依然能夠獲取focus、click、change)，有兩種解決方案，

1.是經過層顯示之後加入對應的class名控制，截斷顯示層下方可獲取焦點元素的事件獲取

2.是經過將可獲取焦點元素加入的disabled屬性，也能夠利用屬性加dom鎖定的方式（disabled的一種變換方式）

4. h5底部輸入框被鍵盤遮擋問題

h5頁面有個很蛋疼的問題就是，當輸入框在最底部，點擊軟鍵盤後輸入框會被遮擋。可採用以下方式解決

var oHeight = $(document).height(); //瀏覽器當前的高度
   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
        
   });

  關於Web移動端Fixed佈局的解決方案，這篇文章也不錯

http://efe.baidu.com/blog/mobile-fixed-layout/

5.不讓 Android 手機識別郵箱

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

6.禁止 iOS 識別長串數字爲電話

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

7.禁止 iOS 彈出各類操做窗口

-webkit-touch-callout:none

8.消除 transition 閃屏

-webkit-transform-style: preserve-3d;     /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility: hidden;      /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/

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

能夠經過正則去掉      this.value = this.value.replace(/\u2006/g, '');

10.禁止ios和android用戶選中文字

-webkit-user-select:none

11.在ios和andriod中,audio元素和video元素在沒法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

12.ios下取消input在輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

13.android下取消輸入語音按鈕

input::-webkit-input-speech-button {display: none}

14  CSS動畫頁面閃白,動畫卡頓

解決方法:
1.儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
2.開啓硬件加速

  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

16.fixed定位缺陷

• ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
• android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
• ios4下不支持position:fixed
• 解決方案： 可用iScroll插件解決這個問題

17.阻止旋轉屏幕時自動調整字體大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

18 Input 的placeholder會出現文本位置偏上的狀況

input 的placeholder會出現文本位置偏上的狀況：PC端設置line-height等於height可以對齊，而移動端仍然是偏上，解決是設置line-height：normal

19 往返緩存問題

點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關係。

解決方法 ：window.onunload = function(){};

20. calc的兼容性處理

CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。
Android瀏覽器目前仍然不支持calc，因此要在以前增長一個保守尺寸：

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}

21 iOS6下僞類:hover

除了<a>以外的元素無效；在Android下則有效。相似

div#topFloatBar_l:hover #topFloatBar_menu { display:block; }

這樣的導航顯示在iOS6點擊沒有點擊效果，只能經過增長點擊偵聽器給元素增減class來控制子元素。

22 在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效：

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

不過這個方法在如今的安卓瀏覽器下，只能去掉那個橙色的背景色，點擊產生的高亮邊框仍是沒有去掉，有待解決！

一個CSS3的屬性，加上後，所關聯的元素的事件監聽都會失效，等於讓元素變得「看得見，點不着」。IE到11纔開始支持，其餘瀏覽器的當前版本基本都支持。詳細介紹見這裏：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

pointer-events: none;

23. Zepto點透的解決方案

zepto的tap是經過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發的,在點擊完成時的tap事件(touchstart\touchend)須要冒泡到document上纔會觸發，而在冒泡到document以前，用戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會觸發click事件的,由於click事件有延遲觸發(這就是爲何移動端不用click而用tap的緣由)(大概是300ms,爲了實現safari的雙擊事件的設計)，因此在執行完tap事件以後，彈出來的選擇組件立刻就隱藏了，此時click事件還在延遲的300ms之中，當300ms到來的時候，click到的其實不是完成而是隱藏以後的下方的元素，若是正下方的元素綁定的有click事件此時便會觸發，若是沒有綁定click事件的話就當沒click，可是正下方的是input輸入框(或者select選擇框或者單選複選框)，點擊默認聚焦而彈出輸入鍵盤，也就出現了上面的點透現象。

引入fastclick.js，在頁面中加入以下js代碼

1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );

或者有zepto或者jQuery的js裏面加上

1 $(function() {
2     FastClick.attach(document.body);
3 });

固然require的話就這樣：

1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);

方案二：用touchend代替tap事件並阻止掉touchend的默認行爲preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2     //不少處理好比隱藏什麼的
3     event.preventDefault();
4 });

方案三：延遲必定的時間(300ms+)來處理事件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //不少處理好比隱藏什麼的
4     },320);
5 });