一.css部分

1.用transition做動(dòng)畫時(shí)，變形盡量通過(guò)transform來(lái)實(shí)現(xiàn)，而不是用height，width等屬性。transform可明顯減少重繪、重畫

1.meta標(biāo)簽

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移動(dòng)端加上這個(gè)標(biāo)簽才是真正的自適應(yīng)，不加的話，假如你把一個(gè)980px寬度(手機(jī)端常規(guī)是980)的PC網(wǎng)頁(yè)
放在手機(jī)上顯示，倒也能正常顯示不出現(xiàn)滾動(dòng)條，不過(guò)是移動(dòng)設(shè)備對(duì)頁(yè)面 做了縮小優(yōu)化，所以字體等都相應(yīng)縮小了
（980px是相對(duì)于手機(jī)像素的，我的是超過(guò)1000px多一些就出現(xiàn)滾動(dòng)條了，這個(gè)沒具體研究）。

關(guān)于  initial-scale=1 ，這個(gè)參照iphone5的尺寸320*568，如果你頁(yè)面按照640*1136做的話，scale就設(shè)為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頂端狀態(tài)條樣式

<meta content="telephone=no" name="format-detection">  忽略將數(shù)字變?yōu)殡娫捥?hào)碼

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

2.圖片尺寸
做全屏顯示的圖片時(shí)，一般為了兼容大部分的手機(jī)，圖片尺寸一般設(shè)為640*960（我是覺得這個(gè)尺寸好，也看不少的圖片也是這個(gè)尺寸，視情況而定）

3.去除webkit的滾動(dòng)條

element::-webkit-scrollbar{
   display: none;
}
如果要去除全部的，就把`element`去掉
同時(shí)這個(gè)屬性可讓在`div`里的滾動(dòng)如絲般順滑：`-webkit-overflow-scrolling : touch`;  

4.去除button在ios上的默認(rèn)樣式

-webkit-appearance: none;
border-radius: 0 

5.placeholder元素樣式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

6.不想讓按鈕touch時(shí)有藍(lán)色的邊框或半透明灰色遮罩（根據(jù)系統(tǒng)而定）

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

7.在移動(dòng)端做動(dòng)畫效果的話，如果通過(guò)改變絕對(duì)定位的top，或者margin的話做出來(lái)的效果很差，很不流暢，而使用css3的transition、transform或者animation的效果將會(huì)非常棒（這一方面IOS比android又要好不少）。
如果用**3d（translate3d）來(lái)實(shí)現(xiàn)動(dòng)畫，會(huì)開啟GPU加速，動(dòng)畫會(huì)更加流暢，但硬件配置差的安卓用起來(lái)會(huì)耗很多性能

8.使用圖片時(shí)，會(huì)發(fā)現(xiàn)圖片下總是有大概4px的空白，（原因據(jù)說(shuō)圖片是inline，觸發(fā)baseline什么的。。。）常用解決方法有

img{display:block}；
img{vertical-align:top}

也可取其他幾個(gè)值，視情況而定
其他解決辦法 見此

9.關(guān)于使用彈性盒子box布局
暫時(shí)有三種方案：

display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 過(guò)渡版本
display:-webkit-flex; // 最新的版本

我暫時(shí)使用的是 display:-webkit-box;暫時(shí)只有這個(gè)的兼容性最好，flex是最好用，還可以如float一樣排多個(gè)元素時(shí)自動(dòng)換行，只是兼容性還太差，（即使是第一種，在火狐下兼容性也不是很好）
對(duì)于第一種常見用法是：

    <ul class="box">
        <li class="box_flex">1</li>
        <li class="box_flex">2</li>
        <li class="box_flex">3</li>
    </ul>
    .box {
        display: -webkit-box;
        -webkit-box-align: center; // 設(shè)置里面的元素垂直居中 
        -webkit-box-pack: center; // 設(shè)置水平居中
    }
    .box .box_flex1 {
        box-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        display: block;
        width: 0;
    }

要想三個(gè)li元素平分box的寬度，width:0是關(guān)鍵（在這個(gè)坑里陷了好久，直到偶然的一次設(shè)置了width：0突然就好了，后來(lái)在天貓上也看到了同樣的設(shè)置width:0）
彈性布局其他詳解可見此

1. 使用 a 標(biāo)簽的話，盡量讓 a 標(biāo)簽 block ，盡量讓用戶可點(diǎn)擊區(qū)域最大化
2. 對(duì)兩個(gè)div使用了transform之后，div下的z-index有時(shí)就會(huì)失效，我遇到過(guò)，但沒去認(rèn)真探究，只是把z-index提高就好了，如果遇到這個(gè)問題的，詳細(xì)可以 看這
3. 在iOS中，當(dāng)你點(diǎn)擊比如 input 準(zhǔn)備輸入時(shí)，虛擬鍵盤彈出，整個(gè)視窗的 高度 就會(huì)變?yōu)?減去鍵盤 的高度，加入你在底部有fixed的元素比如btn，這個(gè)元素就會(huì)跑上來(lái)，一般都不會(huì)太美觀。我是當(dāng)focus時(shí)就把它設(shè)為absolute，視情況而定，也有比如顯示一個(gè)新的層，將含有fixed按鈕的那一層隱藏的情況等等。

另外一種情況（一般在頁(yè)面內(nèi)容很少時(shí)iphone5及以上常發(fā)生），當(dāng)輸入框彈出時(shí)fixed元素?cái)D到輸入框上，當(dāng)輸入框消失時(shí)，fixed元素并沒有隨著輸入框的消失而回到底部，這是因?yàn)檎麄€(gè)視窗的高度還保持在 減去鍵盤的 高度，需要手動(dòng)去觸發(fā)讓視窗高度回到正常，然后試了很多方法都沒成功，后來(lái)的方案是輸入框消失時(shí)給頁(yè)面加隱形的很大的padding比如1000px并在30ms后改為正常，具體可看這移動(dòng)端IOS關(guān)于fixed元素的問題

1. 禁止用戶選中文字 -webkit-user-select:none
2. 當(dāng)把input設(shè)為 width:100%時(shí)，有時(shí)可能會(huì)遇到input的寬度超出了屏幕，這時(shí)可對(duì)input加一個(gè)屬性 box-sizing:border-box

關(guān)于box-sizing:border-box，此屬性是把邊框的寬度和padding包含在盒子的高寬中，假如你設(shè)置兩個(gè)元素float且各占50%，又都有border時(shí)，用這個(gè)屬性就可以完美地讓它們能顯示在同一行

1. 做一個(gè)方向箭頭比如 “>” 時(shí)，可以用一個(gè)正方形的div，設(shè)置border:1px 1px 0 0；然后rotate(45deg)，這樣就省去了一個(gè)圖片
2. CSS權(quán)重：style是1000，id是100，class是10，普通如li、div和偽類是1，通用如*是0；
3. 使用rem時(shí)，設(shè)某個(gè)div比如的height:3rem;line-height:1.5rem;overflow:hidden;時(shí)，在某些android手機(jī)上可能會(huì)出現(xiàn)顯示不止兩行,第三行會(huì)顯示點(diǎn)頭部。 解決：利用js獲取文字line-height再去設(shè)置div高度
4. 使用background時(shí)，background-position里使用了比如center left后不能再加具體的數(shù)值去定位，比如center 10px left（暫時(shí)兼容性差）

19.使用rem布局時(shí)，由于webkit支持的最小字體大小是12px，所以使用html使用62.5%實(shí)際是12px，這樣很難計(jì)算，我的做法是設(shè)置成625%即100px，然后1rem就相當(dāng)于100px

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

1. 在iphone原生鍵盤上用keyup統(tǒng)計(jì)字符數(shù)時(shí)，系統(tǒng)不會(huì)自動(dòng)監(jiān)控你選擇文字的事件，比如打了多個(gè)拼音，可能選擇的實(shí)際文字比輸入的字符數(shù)多或者少，但無(wú)法在用戶確定自己的輸入時(shí)監(jiān)控到keyup（其他事件也一樣）判斷字符數(shù)。 改成input事件就可以了

22.實(shí)現(xiàn)毛玻璃效果，透過(guò)背景看其他元素模糊，自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(0,0,0,0.5);

這個(gè)效果暫時(shí)只有IOS9上的safari可以。
用css3的blur效果的話，是整層元素全部模糊，而透過(guò)模糊層看其他的元素不模糊

1. 如果需要展示小于12px的文字，用transform:scale(%);它將元素縮小，但本身應(yīng)該占的空間并不會(huì)變小，所以比如要元素居左對(duì)齊的話，還需設(shè)置translateX
2. 在移動(dòng)端對(duì)input框使用disabled屬性，會(huì)導(dǎo)致元素里面value值在頁(yè)面上被隱藏看不見，可以對(duì)元素使用css3效果pointer-event:none，意思就是此元素對(duì)鼠標(biāo)事件無(wú)效

二.js部分

1. 如果使用jquery綁定touch事件的話，獲取touchstart，touchmove的觸點(diǎn)坐標(biāo)用 e.originalEvent.targetTouches[0].pageX，

獲取touchend則用 e.originalEvent.changedTouches[0].pageX

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

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

   如果頁(yè)面一開始沒有style值，rotate是寫在CSS里的，需要用到getComputedStyle，具體請(qǐng)看這里

2. 有些版本的iphone4中， audio和video默認(rèn)播放事件不會(huì)觸發(fā)，比如使用window.onload或計(jì)時(shí)器等都不能觸發(fā)播放，必須用JS寫事件讓用戶手動(dòng)點(diǎn)擊觸發(fā)才會(huì)開始播放，比如

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

3. 想要在touchmove:function(e,參數(shù)一)加一個(gè)參數(shù)，結(jié)果直接使用e.preventDefault()就會(huì) e 報(bào)錯(cuò)，處理方法為

   touchmove:function(e,參數(shù)一){
   　　var e=arguments[0]

   e.preventDefault()
   

   }

4. 移動(dòng)端的一些小頁(yè)面可能沒必要用到zepto.js這些工具庫(kù)，就可以使用一些新一點(diǎn)的api，比如選取元素用querySelector(".class #id")和querySelectorAll(".class element"),操作class可以用classList

5. 點(diǎn)擊一個(gè)元素時(shí)，使用touchstart會(huì)立即觸發(fā)，而使用click則用有大概0.3s的延遲

想模擬一個(gè)立即觸發(fā)的點(diǎn)擊事件有兩種方法，fastclick.js和zepto.js里的tap事件。
不過(guò)zepto的tap事件有一個(gè)事件穿透的問題。假如你tap一個(gè)彈出層元素（這個(gè)元素遮罩了一個(gè)a標(biāo)簽），這個(gè)元素立即消失，這樣由于上述的0.3s延遲tap事件就會(huì)傳遞給a標(biāo)簽成click事件造成a標(biāo)簽跳轉(zhuǎn)。
以上面的例子來(lái)說(shuō)，解決方案視情況而定：
① tap時(shí)讓遮罩漸隱消失，這個(gè)過(guò)程超過(guò)400ms就不會(huì)穿透到下一層去了
② 在touchend事件回調(diào)中加入preventDefault, 并在下一層中加上pointer-events:none。（這個(gè)沒用過(guò)）
③ 有的時(shí)候比如彈出一個(gè)iphone上滑動(dòng)出來(lái)的層，點(diǎn)擊黑色半透明區(qū)域彈出層消失，這種可以在黑色區(qū)域綁定touchend也是和tap差不多的效果

1. 當(dāng)彈窗出現(xiàn)時(shí)，想禁止屏幕的滑動(dòng)，給那個(gè)遮罩層添加touchmove事件即可，用e.preventDefault()會(huì)阻止的scroll，click等事件，消失時(shí)再off掉，

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

2. 使用input file上傳文件時(shí)，可以指定接受的類型，accept="image/png,image/jpeg,image/gif" ，同時(shí)在android上默認(rèn)不能使用相機(jī)，可以加capture="camera"

同時(shí)，由于原生的樣式不好看，可以通過(guò)設(shè)置input的display:none,然后使用id.click()去觸發(fā)input元素的點(diǎn)擊。

9.給元素加:active偽類時(shí)，如果要求高，兼容性好的話，就得用js監(jiān)控touchstart然后加相應(yīng)的class

(e.target);
if (target.hasClass("is_hover")) {
target.addClass("hover_css");
}
});

三、微信部分

1. 判斷是否來(lái)自微信瀏覽器

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

2. 判斷手機(jī)的類型

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

3.如果在網(wǎng)頁(yè)里嵌套一個(gè)iframe，src為其他的網(wǎng)址等，當(dāng)在微信瀏覽器打開時(shí)，如果iframe里的頁(yè)面過(guò)大，則iframe的src不能加載（具體多大不知道，只是遇到過(guò)）。

4.微信jssdk里預(yù)覽圖片接口，圖片的url不能填base64編碼，ios上會(huì)很卡，估摸著微信得卡個(gè)5秒左右才打得開，而android上壓跟就卡住或者一直卡在讀取圖片界面

5.微信當(dāng)在輸入框里輸入消息時(shí)，會(huì)提示警示框不要輸入qq密碼等，這個(gè)可以在公眾平臺(tái)的功能設(shè)置的業(yè)務(wù)域名設(shè)置

6.微信里假如頁(yè)面一使用ajax獲取數(shù)據(jù)，當(dāng)你進(jìn)入下一頁(yè)面再按返回鍵返回頁(yè)面一的時(shí)候，有些情況不會(huì)去請(qǐng)求ajax數(shù)據(jù)，會(huì)使用緩存，然而ajax來(lái)的數(shù)據(jù)又并沒有存在緩存里。要設(shè)置cache:false（iphone、android的某些手機(jī)都可能出現(xiàn)）

7.在微信js config的時(shí)候，如果URL的參數(shù)有如?a={"param": "1"},會(huì)導(dǎo)致簽名失敗。給參數(shù)用encodeURIComponent編碼后再傳過(guò)去也是失??！研究了好久。（后臺(tái)代碼沒做任何修改，只在我前端修改代碼）。所以最后還是使用了?param=1這樣的格式