一.css部分
1.meta標(biāo)簽
移動端加上這個標(biāo)簽才是真正的自適應(yīng)御吞，不加的話担敌，假如你把一個980px寬度(手機端常規(guī)是980)的PC網(wǎng)頁 放在手機上顯示跪者，倒也能正常顯示不出現(xiàn)滾動條洛巢，不過是移動設(shè)備對頁面 做了縮小優(yōu)化坡贺，所以字體等都相應(yīng)縮小了 （980px是相對于手機像素的小染，我的是超過1000px多一些就出現(xiàn)滾動條了翘瓮，這個沒具體研究）。
關(guān)于 initial-scale=1 氧映，這個參照iphone5的尺寸320568春畔，如果你頁面按照6401136做的話，scale就設(shè)為0.5
? IOS中safari允許全屏瀏覽
?IOS中Safari頂端狀態(tài)條樣式
?忽略將數(shù)字變?yōu)殡娫捥柎a
? 忽略識別email
2.圖片尺寸 做全屏顯示的圖片時，一般為了兼容大部分的手機律姨，圖片尺寸一般設(shè)為640*960（我是覺得這個尺寸好振峻，也看不少的圖片也是這個尺寸，視情況而定）
3.去除webkit的滾動條
element::-webkit-scrollbar{
display: none;
}
如果要去除全部的择份，就把element去掉 同時這個屬性可讓在div里的滾動如絲般順滑：-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時有藍(lán)色的邊框或半透明灰色遮罩（根據(jù)系統(tǒng)而定）
-webkit-tap-highlight-color:rgba(0,0,0,0);
7.在移動端做動畫效果的話扣孟，如果通過改變絕對定位的top，或者margin的話做出來的效果很差荣赶，很不流暢凤价，而使用css3的transition、transform或者animation的效果將會非常棒（這一方面IOS比android又要好不少）拔创。 如果用**3d（translate3d）來實現(xiàn)動畫利诺，會開啟GPU加速，動畫會更加流暢剩燥，但硬件配置差的安卓用起來會耗很多性能
8.使用圖片時慢逾，會發(fā)現(xiàn)圖片下總是有大概4px的空白，（原因據(jù)說圖片是inline灭红，觸發(fā)baseline什么的侣滩。。变擒。）常用解決方法有
img{display:block}君珠；
img{vertical-align:top}
也可取其他幾個值，視情況而定
9.關(guān)于使用彈性盒子box布局 暫時有三種方案：
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 過渡版本
display:-webkit-flex; // 最新的版本
我暫時使用的是display:-webkit-box;暫時只有這個的兼容性最好娇斑，flex是最好用策添，還可以如float一樣排多個元素時自動換行，只是兼容性還太差悠菜，（即使是第一種舰攒，在火狐下兼容性也不是很好） 對于第一種常見用法是：
? ?
? ?
? ?
.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;
}
要想三個li元素平分box的寬度，width:0是關(guān)鍵（在這個坑里陷了好久悔醋，直到偶然的一次設(shè)置了width：0突然就好了摩窃，后來在天貓上也看到了同樣的設(shè)置width:0）
10.使用a標(biāo)簽的話，盡量讓a標(biāo)簽block芬骄，盡量讓用戶可點擊區(qū)域最大化
11.對兩個div使用了transform之后猾愿，div下的z-index有時就會失效，我遇到過账阻，但沒去認(rèn)真探究蒂秘，只是把z-index提高就好了
12.在iOS中，當(dāng)你點擊比如input準(zhǔn)備輸入時淘太，虛擬鍵盤彈出姻僧，整個視窗的 高度 就會變?yōu)?減去鍵盤 的高度规丽，加入你在底部有fixed的元素比如btn，這個元素就會跑上來撇贺，一般都不會太美觀赌莺。我是當(dāng)focus時就把它設(shè)為absolute，視情況而定松嘶，也有比如顯示一個新的層艘狭，將含有fixed按鈕的那一層隱藏的情況等等。 另外一種情況（一般在頁面內(nèi)容很少時iphone5及以上常發(fā)生）翠订，當(dāng)輸入框彈出時fixed元素擠到輸入框上巢音，當(dāng)輸入框消失時，fixed元素并沒有隨著輸入框的消失而回到底部尽超，這是因為整個視窗的高度還保持在 減去鍵盤的 高度官撼，需要手動去觸發(fā)讓視窗高度回到正常，然后試了很多方法都沒成功似谁，后來的方案是輸入框消失時給頁面加隱形的很大的padding比如1000px并在30ms后改為正常
13.禁止用戶選中文字-webkit-user-select:none
14.當(dāng)把input設(shè)為width:100%時歧寺，有時可能會遇到input的寬度超出了屏幕，這時可對input加一個屬性box-sizing:border-box
關(guān)于box-sizing:border-box棘脐，此屬性是把邊框的寬度和padding包含在盒子的高寬中，假如你設(shè)置兩個元素float且各占50%龙致，又都有border時蛀缝，用這個屬性就可以完美地讓它們能顯示在同一行
15.做一個方向箭頭比如 “>” 時，可以用一個正方形的div目代，設(shè)置border:1px?1px?0?0屈梁；然后rotate(45deg)，這樣就省去了一個圖片
16.CSS權(quán)重：style是1000榛了，id是100在讶，class是10，普通如li霜大、div和偽類是1构哺，通用如*是0；
17.使用rem時战坤，設(shè)某個div比如的height:3rem;line-height:1.5rem;overflow:hidden;時曙强，在某些android手機上可能會出現(xiàn)顯示不止兩行,第三行會顯示點頭部。 解決：利用js獲取文字line-height再去設(shè)置div高度
18.使用background時途茫，background-position里使用了比如center left后不能再加具體的數(shù)值去定位碟嘴，比如center?10px?left（暫時兼容性差）
19.使用rem布局時，由于webkit支持的最小字體大小是12px囊卜，所以使用html使用62.5%實際是12px娜扇，這樣很難計算错沃，我的做法是設(shè)置成625%即100px，然后1rem就相當(dāng)于100px
20.移動端字體使用font-family:?Helvetica,sans-serif;我看這也是天貓使用的
21.在iphone原生鍵盤上用keyup統(tǒng)計字符數(shù)時雀瓢，系統(tǒng)不會自動監(jiān)控你選擇文字的事件枢析，比如打了多個拼音，可能選擇的實際文字比輸入的字符數(shù)多或者少致燥，但無法在用戶確定自己的輸入時監(jiān)控到keyup（其他事件也一樣）判斷字符數(shù)登疗。 改成input事件就可以了
22.實現(xiàn)毛玻璃效果，透過背景看其他元素模糊嫌蚤，自身元素不模糊辐益。
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);
這個效果暫時只有IOS9上的safari可以。 用css3的blur效果的話脱吱，是整層元素全部模糊智政，而透過模糊層看其他的元素不模糊
23.如果需要展示小于12px的文字，用transform:scale(%);它將元素縮小箱蝠，但本身應(yīng)該占的空間并不會變小续捂，所以比如要元素居左對齊的話，還需設(shè)置translateX24.在移動端對input框使用disabled屬性宦搬，會導(dǎo)致元素里面value值在頁面上被隱藏看不見牙瓢，可以對元素使用css3效果pointer-event:none，意思就是此元素對鼠標(biāo)事件無效
二.js部分
1.如果使用jquery綁定touch事件的話间校，獲取touchstart矾克，touchmove的觸點坐標(biāo)用e.originalEvent.targetTouches[0].pageX，獲取touchend則用e.originalEvent.changedTouches[0].pageX2.利用style獲取獲取transform的rotate值
parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])
如果頁面一開始沒有`style`值憔足，`rotate`是寫在`CSS`里的胁附，需要用到`getComputedStyle`，具體請看[這里][5]
3.有些版本的iphone4中，audio和video默認(rèn)播放事件不會觸發(fā)，比如使用window.onload或計時器等都不能觸發(fā)播放恭陡，必須用JS寫事件讓用戶手動點擊觸發(fā)才會開始播放，比如
$(document).one('touchstart',function(){
? ?audio.play();
})
4.想要在touchmove:function(e,參數(shù)一)加一個參數(shù)弓候，結(jié)果直接使用e.preventDefault()就會e報錯，處理方法為
touchmove:function(e,參數(shù)一){
var e=arguments[0]
? ? ?e.preventDefault()
}
5.移動端的一些小頁面可能沒必要用到zepto.js這些工具庫他匪，就可以使用一些新一點的api弓叛，比如選取元素用querySelector(".class #id")和querySelectorAll(".class element"),操作class可以用classList
6.點擊一個元素時，使用touchstart會立即觸發(fā)诚纸，而使用click則用有大概0.3s的延遲 想模擬一個立即觸發(fā)的點擊事件有兩種方法撰筷，fastclick.js和zepto.js里的tap事件。
不過zepto的tap事件有一個事件穿透的問題畦徘。假如你tap一個彈出層元素（這個元素遮罩了一個a標(biāo)簽）毕籽，這個元素立即消失抬闯，這樣由于上述的0.3s延遲tap事件就會傳遞給a標(biāo)簽成click事件造成a標(biāo)簽跳轉(zhuǎn)。 以上面的例子來說关筒，解決方案視情況而定：
①tap時讓遮罩漸隱消失溶握，這個過程超過400ms就不會穿透到下一層去了
② 在touchend事件回調(diào)中加入preventDefault, 并在下一層中加上pointer-events:none。（這個沒用過）
③ 有的時候比如彈出一個iphone上滑動出來的層蒸播，點擊黑色半透明區(qū)域彈出層消失睡榆，這種可以在黑色區(qū)域綁定touchend也是和tap差不多的效果
7.當(dāng)彈窗出現(xiàn)時，想禁止屏幕的滑動袍榆，給那個遮罩層添加touchmove事件即可胀屿，用e.preventDefault()會阻止的scroll，click等事件包雀，消失時再off掉宿崭，
$(".body_cover").on("touchmove", function(e) {
? ?e.preventDefault();
});
8.使用input file上傳文件時，可以指定接受的類型才写，accept="image/png,image/jpeg,image/gif"葡兑，同時在android上默認(rèn)不能使用相機，可以加capture="camera"同時赞草，由于原生的樣式不好看讹堤，可以通過設(shè)置input的display:none,然后使用id.click()去觸發(fā)input元素的點擊。
9.給元素加:active偽類時厨疙，如果要求高蜕劝，兼容性好的話，就得用js監(jiān)控touchstart然后加相應(yīng)的class
$(document).on("touchstart", function(e) {
? ?var target = $(e.target);
? ?if (target.hasClass("is_hover")) {
? ? ? ?target.addClass("hover_css");
? ?}
});
三轰异、微信部分
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 (/ipad|iphone|mac/i.test(navigator.userAgent)){
? ? ? ? ? ?// ?ios
? ? ? ? ? ?user="0";
? ? ? ?}
3.如果在網(wǎng)頁里嵌套一個iframe，src為其他的網(wǎng)址等暑始，當(dāng)在微信瀏覽器打開時搭独，如果iframe里的頁面過大，則iframe的src不能加載（具體多大不知道廊镜，只是遇到過）牙肝。
4.微信jssdk里預(yù)覽圖片接口，圖片的url不能填base64編碼嗤朴，ios上會很卡配椭，估摸著微信得卡個5秒左右才打得開，而android上壓跟就卡住或者一直卡在讀取圖片界面
5.微信當(dāng)在輸入框里輸入消息時雹姊，會提示警示框不要輸入qq密碼等股缸，這個可以在公眾平臺的功能設(shè)置的業(yè)務(wù)域名設(shè)置
6.微信里假如頁面一使用ajax獲取數(shù)據(jù)，當(dāng)你進(jìn)入下一頁面再按返回鍵返回頁面一的時候吱雏，有些情況不會去請求ajax數(shù)據(jù)敦姻，會使用緩存瘾境，然而ajax來的數(shù)據(jù)又并沒有存在緩存里。要設(shè)置cache:false（iphone镰惦、android的某些手機都可能出現(xiàn)）
7.在微信js config的時候迷守，如果URL的參數(shù)有如?a={"param":?"1"},會導(dǎo)致簽名失敗。給參數(shù)用encodeURIComponent編碼后再傳過去也是失斖搿兑凿！研究了好久。（后臺代碼沒做任何修改茵瘾，只在我前端修改代碼）礼华。所以最后還是使用了?param=1這樣的格式
來源：http://mp.weixin.qq.com/s/KpRaX4gPnqvadIZijSmYSQ
