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

孤舟蓑翁發表於2016-04-16

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就搞定了。

 

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

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

方案一:

讓dom元素出現在可見檢視的頂部或底部
document.querySelector('#inputId').scrollIntoView();
 
//只要在input的點選事件，或者獲取焦點的事件中，加入這個api就好了

方案二:

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點透的解決方案

點選穿透的原因:
1.瀏覽器有300ms的延時為了區別是double click還是縮放
2.移動端事件的響應順序 touchstart -> touchmove -> touchend -> tap -> click
在300ms時間範圍內,上層元素隱藏了或移開了,下層相同位置的元素觸發了click事件(普通元素是click事件回撥函式效果,input，select是focus事件,超連結是頁面跳轉)
解決方案是：
1.下層元素本身無click事件,沒有input select a標籤,統一使用touch事件

方案二：下層元素本身無click事件,在上方元素的touchend事件回撥函式中,阻止後續觸發預設事件 e.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 });

 

方案四. 在上層顯示以後加入對應的class名控制，截斷顯示層下方可獲取焦點元素的事件獲取

 

24. user-select:none;造成iPhone5上輸入框的游標不顯示，而游標不顯示造成無法連續輸入。

1、外觀

    A、頁面高度渲染錯誤

    

    在各移動端瀏覽器中經常會出現這種頁面高度100%的渲染錯誤，頁面低端和系統自帶的導航條重合了，高度的不正確我們需要重置修正它，通過javascript程式碼重置掉：

document.documentElement.style.height = window.innerHeight + 'px';

    B、疊加區高亮

    

    在部分android機型中點選頁面某一塊區域可能會出現如圖所示的黃色框秒閃，這是部分機型系統自身的預設定製樣式，給該元素一個CSS樣式重置掉：

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

2、行為

    A、事件無法被觸發

    

    在部分android機型的微信環境中會出現事件無法觸發、表單無法輸入的情況，我們針對需要輸入或者觸發事件的元素設定樣式：-webkit-transform: translate3d(0,0,0) ，不過新版本的微信已經直接修復了該問題。

    B、:active 效果不相容

    

    在android 4.0版本以下CSS :active偽狀態效果無法相容，我們給該元素的touch系列的事件（touchstart/touchend/touchmove）繫結一個空匿名方法:

var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);

3、應用

    A、瀏覽器崩潰

    

var act = function(){
	window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);

    解綁函式寫在了事件處理中導致小米手機中的微信崩潰，那麼我們不要將解綁時間寫在事件處理中即可。

    B、預載入、自動播放無效

    

    如上表所示，經過簡單的測試發現預載入、自動播放的有效性受作業系統、瀏覽器（webview）、版本等的影響，蘋果官方規定必須由使用者手動觸發才會載入音訊，那麼我們捕捉一次使用者輸入後，讓音訊載入實現預載入:

//play and pause it once

document.addEventListener('touchstart', function () {

 document.getElementsByTagName('audio')[0].play();

 document.getElementsByTagName('audio')[0].pause();

});

    C、無法同時播放多音訊

    

    在android裝置中,播放後一音訊會打斷前一音訊，而不會同步播放,這個是目前系統資深決定的，我們只有採取優雅降權的方法讓android選擇不一樣風格的音訊前後切換播放而不是同時播放，達到與預期接近的音訊效果。

    D、不支援區域性滾動

    

    在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 樣式設定滾動條無效，這裡有兩種解決方案:

    1、巧用佈局直接設定樣式滾動條在body(html)上，其他元素“錯覺滾動”。

    2、利用iscroll、自寫js控制translate、scrollTop模擬

4、系統/硬體

    A、怪異懸浮的表單

    

    在部分android 機型中的輸入框可能會出現如圖怪異的多餘的浮出表單，經過觀察與測試發現只有input:password型別的輸入框存在，那麼我們只要使用input:text型別的輸入框並通過樣式-webkit-text-security: disc; 隱藏輸入密碼從而解決。

    B、錯誤出現滾動條

    

    在遊戲內嵌頁中出現了不應該出現的滾動條，而且內容並沒有超出內容區寬度，經過測試overflow:hidden 無效，通過一系列嘗試使用古老的 <body scroll="no"> 寫法解決，多嘗試一下不同的寫法和屬性會有不一樣的驚喜哦！

    C、連結開啟系統瀏覽器

    

    在遊戲內webview的部分android機型中可能會出現點選連結呼叫系統瀏覽器的情況，這是一個非常不好的體驗。那麼我們嘗試給這個元素新增 target="_blank"' 屬性有可能解決，如果還不能解決那麼需要修改IOS或android原生系統函式了。

    D、Flex box 不相容

    

    在遊戲內嵌webview中碰到Flex box佈局不相容的情況，圖中所示下面部分的導航錯位了，雖然之前有仔細檢視過Flex box的相容性，但是在遊戲內嵌頁中無法確定其呼叫的系統瀏覽器版本及相容，所以導致錯誤，所以我們寫完整歷史版本呢的3種Flex box 解決。那麼我們思考在寫頁面過程中還是本著保守穩定的方式書寫樣式可以減少不不要的麻煩。









相關文章