兼容性積累

1、兼容性問題

1.input輸入框+position:absolute帶來的問題

狀況：在input被獲取焦點時，屏幕上position屬性值爲absolute的元素，包含input，會被彈出的虛擬鍵盤頂起，致使顯示樣式異常

展現：android存在問題 ios正常

緣由：當子元素定位方式爲absolute或者fixed，父容器沒有position:relative，那麼當前元素根據body定位。因android的虛擬鍵盤顯示機制佔用了一部分的屏幕，使得瀏覽器的屏幕資源高度縮小，定位發生改變，因此出現「被頂起」的狀況。

解決：給被頂起的子元素添加父級元素設relative，並設置高度。

2.移動端click 300ms延遲

狀況：會形成按鈕點擊延遲甚至是點擊失效

展現：click事件在ios出現異常

緣由：這是因爲區分單擊事件和雙擊屏幕縮放的歷史緣由形成的

解決：1.使用fastclick插件（不考慮）

         2.使用touch系列事件：start->move->end->click

         3.藉助zepto的touch模塊

3.IOS的非點擊標籤沒法綁定click

狀況：如題，好比label span

展現：無

緣由：未知

解決：給該標籤添加 cursor:pointer屬性

4.三星手機遮罩下穿透問題

狀況：遮罩層下的input、select、a等元素能夠被點擊和focus

展現：無

緣由：未知

解決：將問題元素加入的disabled屬性

5.fixed兼容性問題

狀況：ios下fixed元素定位時容易出錯，且軟鍵盤彈出時，影響到fixed元素的定位

展現：Android下大部分正常

緣由：未知

解決：使用iscroll插件

6.底部輸入框被遮擋

狀況：1.底部輸入框軟鍵盤會將底部輸入框遮擋

        2.頁面自動上移，致使下方空白

        3.IOS使用IScroll時，光標不會伴隨輸入框移動

        4.軟鍵盤彈出致使頁面元素錯位

展現：Android和ios

緣由：當輸入框位於半屏如下時

解決：1.儘可能避免使用iscroll

        2.ios使用 overflow:auto;

            -webkit-overflow-scrolling:touch;/*當手指從觸摸屏上移開，會保持一段時間的滾動*/

            -webkit-overflow-scrolling:auto;/*當手指從觸摸屏上移開，滾動會當即中止*/

        3.最好在設計上規避，好比表單填寫儘可能分頁，保證輸入框在上半屏

        4.使用js解決，代價太大，建議不用

var oHeight = $(document).height(); 
   
$(window).resize(function(){
 
     if($(document).height() < oHeight){
         
           $(".inputName").css("position","static");
     }else{
           $(".inputName").css("position","absolute");
     }
        
});

7.數字鍵盤調起差別

狀況：在使用input type=number時，ios不會出現九宮格

展現：ios展現101鍵盤

緣由：未知

解決：<input type="number" pattern="[0-9]*" />

     <input type="tel" /> 

8.android個別機型 Input 的placeholder會出現文本位置偏上的狀況

狀況：如題

展現：文本在input中不能垂直居中

緣由：未知

解決：使用line-height:normal

9.safari手機版中回退有概率不會執行js

狀況：如題

展現：不執行js代碼

緣由：和safari中的往返緩存(b-f cache)機制有關

解決：在頁面中增長 window.onunload=function(){}

10.ios6 中hover無效

狀況：在ios 6中除了a標籤以外的標籤:hover無效

展現：如題

緣由：未知

解決：只能使用 css class進行解決

11.zepto tap事件透傳

狀況：好比關閉遮罩，在關閉按鈕綁定tap事件，關閉時會觸發遮罩下元素的click事件

展現：無

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

解決：1.使用fastclick插件

        2.使用touchend事件替代tap事件

        3.延遲320ms執行

12.android個別機型body高度100%展現錯誤

狀況：實際的高度比100%的高度小

展現：如題

緣由：將系統自帶的導航條一併算入高度重

解決：使用js重置高度：document.documentElement.style.height = window.innerHeight + 'px';

13.android部分低端機型中出現黃色框

狀況：如題

展現：如題

緣由：系統自帶

解決：使用-webkit-tap-highlight-color: rgba(255,0,0,0);消除這一行爲

14.android 4.0如下部分機型 active僞類不兼容

狀況：android 4.0如下

展現：樣式不統一

緣由：系統自身緣由

解決：爲存在active的元素監聽touch系列事件，且綁定空函數

15.上拉下滑滾動條卡頓 

狀況：Android ios都存在

展現：無

緣由：未知

解決：body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}  支持：Android3+和iOS5+ 實質就是保持一段時間的滾動

16.mask蒙版的兼容性

狀況：低端android不支持mask蒙版

展現：無

緣由：不支持-webkit-mask屬性

解決：只能採用降級處理或js、添加html處理，經過判斷style中是否存在WebkitMask進行判斷，而後採起相應降級措施

17.圓角變方

狀況：Android 個別2.x手機圓角失效

展現：時好時壞

緣由：未知

解決：使用css解決：background-clip:padding-box;

         border-box:裁剪背景到邊框內

         content-box:裁剪背景到內容內

         padding-box:裁剪背景到內邊距內

18.IOS input keyup、keydown、keypress響應較慢

狀況：主要存在於IOS中

展現：在輸入關鍵字查詢中須要及時響應keyup事件作相應處理，ios中事件觸發的並不及時

緣由：未知

解決：使用html5的oninput事件代替onkeyup事件

主要狀況在

2、怪異行爲消除

1.鍵盤顯示search按鈕

  <input type="search">

2.取出textarea默認樣式

  去除右下角樣式：resize:none

  去除框外上下空白：vertical-align: middle;

3.禁止 iOS 彈出操做窗口

  -webkit-touch-callout:none

4.消除transition閃屏效果

   -webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/

 -webkit-backface-visibility: hidden; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/

5.iOS用中文輸入法輸入英文，字母之間出現六分之一空格

  this.value = this.value.replace(/\u2006/g, '');

6.ios 及 android中audio控件沒法自動播放

  監聽html touchstart事件，而後觸發audio.play

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

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

8.IOS取消英文首字母大寫

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

9.打電話和發短信

  <a href="tel:1234-5678">致電:1234-5678</a>

 <a href="sms:13245555555">短信: 13245555555</a>

10.去除表單等元素ios\android的系統默認樣式

   -webkit-appearance: none;

11.修改input placeholder的樣式

   input::-webkit-input-placeholder{color: #ccc;}

   input:focus::-webkit-input-placeholder{color: #333;}

12.去除android a/button/input標籤被點擊時產生的邊框 & 去除ios a標籤被點擊時產生的半透明灰色背景

     a,button,input{-webkit-tap-highlight-color: rgba(255,0,0,0);}

13.避免android ios的字體不得小於12px

     -webkit-text-size-adjust:none

     可是會形成safari的字體縮放功能失效，因此建議

     -webkit-text-size-adjust:100%

14.開啓硬件加速

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

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

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

   transform: translate3d(0, 0, 0);

15.返回頂部卡頓 失靈

   因爲移動端scroll事件觸發的時間不具備連貫性，且支持很差，且zepto沒有animate，因此須要使用定時器運動修改scrollTop進行返回頂部

  現成代碼：

 

//返回頂部動畫
//goTop(500);//500ms內滾回頂部
function goTop(times){
 if(!!!times){
  $(window).scrollTop(0);
  return;
 }
 
 var sh=$('body').scrollTop();//移動總距離
 var inter=13.333;//ms,每次移動間隔時間
 var forCount=Math.ceil(times/inter);//移動次數
 var stepL=Math.ceil(sh/forCount);//移動步長
 var timeId=null;
 function ani(){
  !!timeId&&clearTimeout(timeId);
  timeId=null;
  //console.log($('body').scrollTop());
  if($('body').scrollTop()<=0||forCount<=0){//移動端判斷次數好些，由於移動端的scroll事件觸發不頻繁，有可能檢測不到有<=0的狀況
   $('body').scrollTop(0);
   return;
  }
  forCount--;
  sh-=stepL;
  $('body').scrollTop(sh);
  timeId=setTimeout(function(){ani();},inter);
 }
 ani();
}

16.取消部分Android機型自帶的close按鈕

  #Search::-webkit-search-cancel-button{

     display : none ; 

  }

17.chrome Mobile fixed元素沒法點擊

場景：父子同時設置overflow:hidden 父元素設置position: fixed; 子元素設置position: absolute;且這些元素並未在頁面頂部。

此時頁面往下滾動， 則出現 子元素沒法點擊 的bug。

解決：去掉overflow：hidden

 

3、mate標籤的使用

1.禁止個別Android 手機識別郵箱

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

2.禁止 iOS 識別長串數字做爲手機號

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

3.微信瀏覽器定寬640px

  <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

4.ios 7.0+ 當網站添加到主屏幕存在快速啓動方式時隱藏地址欄

  <meta name="apple-mobile-web-app-capable" content="yes" />

5.ios 快速啓動時改變頂端狀態條樣式

  <meta name="apple-mobile-web-app-status-bar-style" content="black|default|black-translucent" />

6.ios android添加主屏快捷方式後的標題

 <meta name="apple-mobile-web-app-title" content="標題">

4、技巧類

1.IOS桌面圖標的設置

 

< link rel = "apple-touch-icon" href = "touch-icon-iphone.png" />

 

< link rel = "apple-touch-icon" sizes = "76x76" href = "touch-icon-ipad.png" />

 

< link rel = "apple-touch-icon" sizes = "120x120" href = "touch-icon-iphone-retina.png" />

 

< link rel = "apple-touch-icon" sizes = "152x152" href = "touch-icon-ipad-retina.png" />

IOS下會有光澤感，使用一下標籤能夠取消光澤感

< link rel = "apple-touch-icon-precomposed" href = "touch-icon-iphone.png" />

 

2.IOS頁面啓動圖片避免白屏

<linkrel="apple-touch-startup-image"href="start.png"/>