移動端常見兼容性問題總結


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

      移動設備上的web網頁是有300ms延遲的,往往會造成按鈕點擊延遲甚至是點擊失效。

      這是由於區分單機事件和雙擊屏幕縮放的歷史原因造成的。

      解決方式:

      fastclick可以解決在手機上點擊事件的300ms延遲
      zepto的touch模塊,tap事件也是為了解決在click的延遲問題
      觸摸屏的相應順序為touchstart-->touchmove-->touchend-->click,也可以通過綁定ontouchstart事件,加快事件的響應,解決300ms的延遲問題

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

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

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

      var oHeight = $(document).height(); //瀏覽器當前的高度

      $(window).resize(function(){

       if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); } });

 

4.    不讓 Android 手機識別郵箱

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

  

5.    禁止 iOS 識別長串數字為電話

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

  

6.    禁止 iOS 彈出各種操作窗口

-webkit-touch-callout:none

  

7.    消除 transition 閃屏

8.    iOS 系統中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格可以通過正則去掉

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

  

9.    禁止ios和android用戶選中文字10.    CSS動畫頁面閃白,動畫卡頓

-webkit-user-select:none

  

     解決方法:
    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);

  

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM