移動端頁面兼容性問題解決方案整理

1、瀏覽器

【UC瀏覽器】video標籤脫離文檔流

場景：<video>標籤的父元素(祖輩元素)設置transform樣式後，<video>標籤會脫離文檔流。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解決方案：不使用transform屬性。translate用top、margin等屬性替代。

 

【UC瀏覽器】video標籤總在最前

場景：<video>標籤老是在最前（能夠理解爲video標籤的z-index屬性是Max）。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

 

【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象

場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素。

　　　在8.6的版本,這個狀況直接出現。

　　　在8.7以後的版本,當同輩元素的height大於713這個「神奇」的數值時,纔會被遮擋。

測試環境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

 

【QQ手機瀏覽器】不支持HttpOnly

場景：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效。JavaScript能夠直接讀取設置了HttpOnly的Cookie值。

測試環境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。

 

【MIUI原生瀏覽器】瀏覽器地址欄hash不改變

場景：location.hash 被賦值後，地址欄的地址不會改變。

　　　但實際上 location.href 已經更新了，經過JavaScript能夠順利獲取到更新後的地址。

　　　雖然不影響正常訪問，但用戶沒法將訪問過程當中改變hash後的地址存爲書籤。

測試環境：MIUI 4.0

 

【Chrome Mobile】fixed元素沒法點擊

 場景：父元素設置position: fixed;

　　　子元素設置position: absolute;

　　　此時，若是父元素/子元素還設置了overflow: hidden 則出現「父元素遮擋該子元素「的bug。

　　　視覺(view)層並無出現遮擋，只是沒法觸發綁定在該子元素上的事件。可理解爲：「看到點不到」。

補充： 頁面往下滾動，觸發position: fixed;的特性時，纔會出現這個bug，在最頂不會出現。

測試平臺： 小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解決辦法： 把父元素和子元素的overflow: hidden去掉。

 

2、 css部分

1. body若是設置height:100%;overflow:hidden是依然能夠滑動的，若是需禁止，要再加一層div設置 height:100%加overflow：hidden（html,body加height:100%） ，這樣元素超出body的高度也不能滑動了。
   或者同時給html，body加height:100%;overflow:hidden

2. meta標籤 

   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移動端加上這個標籤纔是真正的自適應，不加的話，假如你把一個980px寬度(手機端常規是980)的PC網頁放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動設備對頁面 作了縮小優化，因此字體等都相應縮小了（980px是相對於手機像素的，個人是超過1000px多一些就出現滾動條了，這個沒具體研究）。
   
   關於  initial-scale=1 ，這個參照iphone5的尺寸320*568，若是你頁面按照640*1136作的話，scale就設爲0.5                     

   <meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari容許全屏瀏覽 
   
   <meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari頂端狀態條樣式
   
   <meta content="telephone=no" name="format-detection">  忽略將數字變爲電話號碼

   <meta content="email=no" name="format-detection">   忽略識別email

3. 作全屏顯示的圖片時，通常爲了兼容大部分的手機，圖片尺寸通常設爲640*960（我是以爲這個尺寸好，也看很多的圖片也是這個尺寸，視狀況而定）

4. 去除webkit的滾動條 

   element::-webkit-scrollbar{

          display: none;

   }

5. 去除button在ios上的默認樣式

   -webkit-appearance: none;

   border-radius: 0 

6. 不想讓按鈕touch時有藍色的邊框     -webkit-tap-highlight-color:rgba(0,0,0,0);

7. 若是要用到fixed譬如導航等，能夠用absolute達到同樣的效果，把body設爲100%；將元素absolute到body上便可，不過這樣不能讓body滾動，若是須要有滾動的地方，就放在div中滾動

8. 在移動端作動畫效果的話，若是經過改變絕對定位的top，或者margin的話作出來的效果不好，很不流暢，而使用css3的transition或者animation的效果將會很是棒（這一方面IOS比android又要好很多）。
   若是用translate3d來實現動畫，會開啓GPU加速，硬件配置差的安卓用起來會耗性能，需慎用（借用1樓評論的）

9. 使用圖片時，會發現圖片下老是有大概4px的空白，（緣由聽說圖片是inline，觸發baseline什麼的。。。）經常使用解決方法有

   img{display:block}；

   img{vertical-align:top}也可取其餘幾個值，視狀況而定

10. 學會使用display:-webkit-box的佈局，能很好地幫咱們作到頁面自適應，譬如 導航欄 這些我的以爲特別適合，具體使用方法此處不敘述

11. 使用 a 標籤的話，儘可能讓 a 標籤 block ，儘可能讓用戶可點擊區域最大化

12. 兩個頁面使用了transform以後，頁面下的z-index有時就會失效，我遇到過，但沒去認真探究，只是把z-index提升就行了。

13. 在iOS中，當你點擊好比 input 準備輸入時，虛擬鍵盤彈出，整個視窗的 高度 就會變爲 減去鍵盤 的高度，加入你在底部有fixed的元素好比btn，這個元素就會跑上來，通常都不會太美觀。我是當focus時就把它設爲absolute，視狀況而定

14. 禁止用戶選中文字   -webkit-user-select:none

15. 當你把input設爲 width:100%時，有時可能會遇到input的寬度超出了屏幕，這時可對input加一個屬性 box-sizing:border-box

    關於box-sizing:border-box，此屬性是把邊框的高寬包含在盒子的高寬中，假如你設置兩個元素float且各佔50%，又都有border時，用這個屬性就能夠完美地讓它們能顯示在同一行

16. 要table的td用col設置了寬度後超出部分隱藏的話給table加屬性table-layout:fixed（固定寬度佈局）

17. 若是想改變 placeholder  裏的樣式，須要用css僞類。    如  ::-webkit-input-placeholder{color:#ccc}

18. 作一個方向箭頭好比  「>」 時，能夠用一個正方形的div，設置border:1px 1px 0 0；而後rotate(45deg)

19. CSS權重：style是1000，id是100，class是10，普通如li、div和僞類是1，通用如*是0；

20. 使用rem時，設某個div好比的height:3rem;line-height:1.5rem;overflow:hidden;時，在某些android手機上可能會出現顯示不止兩行,第三行會顯示點頭部。 解決：利用js獲取文字line-height再去設置div高度

三. JS部分

1. 若是使用jquery綁定touch事件的話，獲取touchstart，touchmove的觸點座標用 e.originalEvent.targetTouches[0].pageX，獲取touchend則用 e.originalEvent.changedTouches[0].pageX

2. 利用style獲取獲取transform的rotate值

   parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])

   若是頁面一開始沒有style值，rotate是寫在CSS裏的，須要用到getComputedStyle。

3. 有些版本的iphone4中， audio和video默認播放事件不會觸發，好比使用window.onload或計時器等都不能觸發播放，必須用JS寫事件讓用戶手動點擊觸發纔會開始播放

4. 想要在touchmove:function(e,參數一)加一個參數，結果直接使用e.preventDefault()就會 e 報錯，處理方法爲

   touchmove:function(e,參數一){
   　　var e=arguments[0]
         e.preventDefault()
   }

5. HTML5的新js API有新的選擇器，好比querySelector(".class #id")和querySelectorAll(".class  element")。

6. 點擊一個元素時，使用touchstart會當即觸發，而使用click則用有大概0.3s的延遲

7. 用e.preventDefault()會阻止的scroll，click等事件

四. 微信部分

2. 判斷是否來自微信瀏覽器

   function isFromWeiXin() {
       var ua = navigator.userAgent.toLowerCase();
       if (ua.match(/MicroMessenger/i) == "micromessenger") {
           return true;
       }
       return false;
   }

3. 判斷手機的類型

   var user="";
           if (/android/i.test(navigator.userAgent)){
   　　      //  android
               user="1";
           }
           if (/ipad|iphone|mac/i.test(navigator.userAgent)){
               //  ios
               user="0";
           }

4. 微信瀏覽器裏均不能打開下載的連接，需在瀏覽器打開

5. 若是在網頁裏嵌套一個iframe，src爲其餘的網址等，當在微信瀏覽器打開時，若是irame裏的頁面過大，則iframe的src不能加載（具體多大不知道，只是遇到過）

6. 微信升級到6.0後，在微信網頁裏須要用到設置分享的標題等，須要用到JSSDK，同時去微信公衆平臺裏綁定裏放置網頁的域名。不過JSSDK也不是全部問題都解決了，在android裏點擊分享到朋友圈時就觸發了分享成功的回調函數，即便取消分享也已經觸發了成功的函數（如今不知道是否有修復，若是遇到了這類問題，應該就是這個緣由）