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

標籤：

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");    }           });

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 系統中文IME輸入英文時，字母之間可能會出現一個六分之一空格

可以通過正則去掉      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 nput 的placeholder會出現文本位置偏上的情況

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

19 往返緩衝問題

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

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

 

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