移動端知識

一.css部分

1.meta標籤

1. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

移動端加上這個標籤纔是真正的自適應，不加的話，假如你把一個980px寬度(手機端常規是980)的PC網頁 放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動設備對頁面 作了縮小優化，因此字體等都相應縮小了 （980px是相對於手機像素的，個人是超過1000px多一些就出現滾動條了，這個沒具體研究）。

關於 initial-scale=1 ，這個參照iphone5的尺寸320568，若是你頁面按照6401136作的話，scale就設爲0.5

1. <meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari容許全屏瀏覽

2.  

3. <meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari頂端狀態條樣式

4.  

5. <meta content="telephone=no" name="format-detection">  忽略將數字變爲電話號碼

6.  

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

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

3.去除 webkit的滾動條

1. element::-webkit-scrollbar{

2. display: none;

3. }

若是要去除所有的，就把 element去掉 同時這個屬性可以讓在 div裏的滾動如絲般順滑： -webkit-overflow-scrolling : touch;

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

1. -webkit-appearance: none;

2. border-radius: 0

5. placeholder元素樣式的修改

1. input::-webkit-input-placeholder{color:red;}

2. input:focus::-webkit-input-placeholder{color:green;}

6.不想讓按鈕 touch時有藍色的邊框或半透明灰色遮罩（根據系統而定）

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

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

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

1. img{display:block}；

2. img{vertical-align:top}

也可取其餘幾個值，視狀況而定

9.關於使用彈性盒子 box佈局 暫時有三種方案：

1. display:-webkit-box; // 早期的版本

2. display:-webkit-box-flex; // 過渡版本

3. display:-webkit-flex; // 最新的版本

我暫時使用的是 display:-webkit-box;暫時只有這個的兼容性最好， flex是最好用，還能夠如 float同樣排多個元素時自動換行，只是兼容性還太差，（即便是第一種，在火狐下兼容性也不是很好） 對於第一種常見用法是：

1. <ul class="box">

2.    <li class="box_flex">1</li>

3.    <li class="box_flex">2</li>

4.    <li class="box_flex">3</li>

5. </ul>

6. .box {

7.    display: -webkit-box;

8.    -webkit-box-align: center; // 設置裏面的元素垂直居中

9.    -webkit-box-pack: center; // 設置水平居中

10. }

11. .box .box_flex1 {

12.    box-flex: 1;

13.    -webkit-box-flex: 1;

14.    -moz-box-flex: 1;

15.    display: block;

16.    width: 0;

17. }

要想三個 li元素平分 box的寬度， width:0是關鍵（在這個坑裏陷了很久，直到偶然的一次設置了 width：0忽然就行了，後來在天貓上也看到了一樣的設置 width:0） 

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

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

12.在 iOS中，當你點擊好比 input 準備輸入時，虛擬鍵盤彈出，整個視窗的 高度 就會變爲 減去鍵盤 的高度，加入你在底部有 fixed的元素好比 btn，這個元素就會跑上來，通常都不會太美觀。我是當 focus時就把它設爲 absolute，視狀況而定，也有好比顯示一個新的層，將含有 fixed按鈕的那一層隱藏的狀況等等。 另一種狀況（通常在頁面內容不多時 iphone5及以上常發生），當輸入框彈出時 fixed元素擠到輸入框上，當輸入框消失時， fixed元素並無隨着輸入框的消失而回到底部，這是由於整個視窗的高度還保持在 減去鍵盤的 高度，須要手動去觸發讓視窗高度回到正常，而後試了不少方法都沒成功，後來的方案是輸入框消失時給頁面加隱形的很大的 padding好比 1000px並在 30ms後改成正常

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

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

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

15.作一個方向箭頭好比 「>」 時，能夠用一個正方形的 div，設置 border:1px 1px 0 0；而後 rotate(45deg)，這樣就省去了一個圖片 

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

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

18.使用 background時， background-position裏使用了好比 center left後不能再加具體的數值去定位，好比 center 10px left（暫時兼容性差）

19.使用 rem佈局時，因爲 webkit支持的最小字體大小是 12px，因此使用 html使用 62.5%實際是 12px，這樣很難計算，個人作法是設置成 625%即 100px，而後 1rem就至關於 100px

20.移動端字體使用 font-family: Helvetica,sans-serif;我看這也是天貓使用的

21.在 iphone原生鍵盤上用 keyup統計字符數時，系統不會自動監控你選擇文字的事件，好比打了多個拼音，可能選擇的實際文字比輸入的字符數多或者少，但沒法在用戶肯定本身的輸入時監控到 keyup（其餘事件也同樣）判斷字符數。 改爲 input事件就能夠了

22.實現毛玻璃效果，透過背景看其餘元素模糊，自身元素不模糊。

1. -webkit-backdrop-filter: saturate(180%) blur(20px);

2. background: rgba(0,0,0,0.5);

這個效果暫時只有 IOS9上的 safari能夠。 用 css3的 blur效果的話，是整層元素所有模糊，而透過模糊層看其餘的元素不模糊

23.若是須要展現小於 12px的文字，用 transform:scale(%);它將元素縮小，但自己應該佔的空間並不會變小，因此好比要元素居左對齊的話，還需設置 translateX 24.在移動端對 input框使用 disabled屬性，會致使元素裏面 value值在頁面上被隱藏看不見，能夠對元素使用 css3效果 pointer-event:none，意思就是此元素對鼠標事件無效

二.js部分

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

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

2.  

3. 若是頁面一開始沒有`style`值，`rotate`是寫在`CSS`裏的，須要用到`getComputedStyle`，具體請看[這裏][5]

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

1. $(document).one('touchstart',function(){
   
      audio.play();
   
   })
   

   　　

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

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

   　　

5.移動端的一些小頁面可能不必用到 zepto.js這些工具庫，就可使用一些新一點的 api，好比選取元素用 querySelector(".class #id")和 querySelectorAll(".class element"),操做 class能夠用 classList

6.點擊一個元素時，使用 touchstart會當即觸發，而使用 click則用有大概 0.3s的延遲 想模擬一個當即觸發的點擊事件有兩種方法， fastclick.js和 zepto.js裏的 tap事件。

不過 zepto的 tap事件有一個事件穿透的問題。假如你 tap一個彈出層元素（這個元素遮罩了一個 a標籤），這個元素當即消失，這樣因爲上述的 0.3s延遲 tap事件就會傳遞給 a標籤成 click事件形成a標籤跳轉。 以上面的例子來講，解決方案視狀況而定： 

① tap時讓遮罩漸隱消失，這個過程超過 400ms就不會穿透到下一層去了 

② 在 touchend事件回調中加入 preventDefault, 並在下一層中加上 pointer-events:none。（這個沒用過） 

③ 有的時候好比彈出一個 iphone上滑動出來的層，點擊黑色半透明區域彈出層消失，這種能夠在黑色區域綁定 touchend也是和 tap差很少的效果

7.當彈窗出現時，想禁止屏幕的滑動，給那個遮罩層添加 touchmove事件便可，用 e.preventDefault()會阻止的 scroll， click等事件，消失時再 off掉，

1. $(".body_cover").on("touchmove", function(e) {
   
      e.preventDefault();
   
   });
   

   　　

8.使用 input file上傳文件時，能夠指定接受的類型， accept="image/png,image/jpeg,image/gif" ，同時在 android上默認不能使用相機，能夠加 capture="camera" 同時，因爲原生的樣式很差看，能夠經過設置input的display:none,而後使用id.click()去觸發input元素的點擊。

9.給元素加:active僞類時，若是要求高，兼容性好的話，就得用js監控touchstart而後加相應的class

1. $(document).on("touchstart", function(e) {
   
      var target = $(e.target);
   
      if (target.hasClass("is_hover")) {
   
          target.addClass("hover_css");
   
      }
   
   });
   

   　　

3、微信部分

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

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

   　　

2.判斷手機的類型

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

   　　

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

4.微信 jssdk裏預覽圖片接口，圖片的 url不能填 base64編碼， ios上會很卡，估摸着微信得卡個 5秒左右纔打得開，而 android上壓跟就卡住或者一直卡在讀取圖片界面

5.微信當在輸入框裏輸入消息時，會提示警示框不要輸入qq密碼等，這個能夠在公衆平臺的功能設置的業務域名設置

6.微信裏假如頁面一使用 ajax獲取數據，當你進入下一頁面再按返回鍵返回頁面一的時候，有些狀況不會去請求 ajax數據，會使用緩存，然而 ajax來的數據又並無存在緩存裏。要設置 cache:false（iphone、android的某些手機均可能出現）

7.在微信 js config的時候，若是 URL的參數有如 ?a={"param": "1"},會致使簽名失敗。給參數用 encodeURIComponent編碼後再傳過去也是失敗！研究了很久。（後臺代碼沒作任何修改，只在我前端修改代碼）。因此最後仍是使用了 ?param=1這樣的格式

 

原文：https://segmentfault.com/a/1190000003908191