移動端前端筆記 — 遇到的常見JS與CSS問題及解決方案

筆者接觸移動前端快一年了，特將平時的一些筆記整理出來，希望能夠給需要的人一些小小的協助。同時也由於筆者的水平有限，雖說都是筆者遇到過使用過的，但文中可能也會出現一些問題或不嚴謹的地方，望各位指出，不勝感激！

一. 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}

二. 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的延遲

三. 微信部分

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

   function isFromWeiXin() {

       var ua = navigator.userAgent.toLowerCase();

       if (ua.match(/MicroMessenger/i) == "micromessenger") {

           return true;

       }

       return false;

   }

2. 判斷手機的類型

   var user="";

           if (/android/i.test(navigator.userAgent)){

   　　      //  android

               user="1";

           }

           if (/ipadiphonemac/i.test(navigator.userAgent)){

               //  ios

               user="0";

           }

3. 微信瀏覽器裡均不能開啟下載的連結，需在瀏覽器開啟

4. 如果在網頁裡嵌套一個iframe，src為其他的網址等，當在微信瀏覽器開啟時，如果irame裡的頁面過大，則iframe的src不能載入（具體多大不知道，只是遇到過）

5. 微信升級到6.0後，在微信網頁裡需要用到設定分享的標題等，需要用到JSSDK，同時去微信公眾平台裡綁定裡放置網頁的網域名稱。
   不過JSSDK也不是所有問題都解決了，在android裡點擊分享到朋友圈時就觸發了分享成功的回呼函數，即使取消分享也已經觸發了成功的函數（現在不知道是否有修複，如果遇到了這類問題，應該就是這個原因）