一. css部分
body如果設(shè)置height:100%;overflow:hidden是依然可以滑動的址儒，如果需禁止捕发，要再加一層div設(shè)置 height:100%加overflow：hidden（html,body加height:100%） 庙楚，這樣元素超出body的高度也不能滑動了
meta標簽
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移動端加上這個標簽才是真正的自適應(yīng)面哥，不加的話哎壳，假如你把一個960px寬度的PC網(wǎng)頁放在手機上顯示，倒也能正常顯
示不出現(xiàn)滾動條尚卫，不過是移動設(shè)備對頁面 做了縮小優(yōu)化归榕，所以字體等都相應(yīng)縮小了（960px是相對于手機像素的，我的是超過1000px多一些就出現(xiàn)滾動條了吱涉，這個沒具體研究刹泄。
關(guān)于 initial-scale=1 ，這個是參照iphone5的尺寸320568怎爵，如果你頁面按照6401136做的話特石，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)殡娫捥柎a
<meta content="email=no" name="format-detection"> 忽略識別email
做全屏顯示的圖片時，一般為了兼容大部分的手機鳖链，圖片尺寸一般設(shè)為640*960（我是覺得這個尺寸好姆蘸，也看不少的圖片也是這個尺寸，是情況而定）
去除webkit的滾動條
element::-webkit-scrollbar{
display: none;
}
去除button在ios上的默認樣式
-webkit-appearance: none;
border-radius: 0
不想讓按鈕touch時有藍色的邊框 -webkit-tap-highlight-color:rgba(0,0,0,0);
如果要用到fixed譬如導(dǎo)航等芙委，可以用absolute達到一樣的效果逞敷，把body設(shè)為100%；將元素absolute到body上即可
在移動端做動畫效果的話题山，如果通過改變絕對定位的top兰粉，或者margin的話做出來的效果很差，很不流暢顶瞳，而使用css3的transition或者animation的效果將會非常棒（這一方面IOS比android又要好不少）
使用圖片時玖姑，會發(fā)現(xiàn)圖片下總是有大概4px的空白，（原因據(jù)說圖片是inline慨菱，觸發(fā)baseline什么的焰络。。符喝。）常用解決方法有
img{display:block}闪彼；
img{vertical-align:top}也可取其他幾個值，視情況而定
其他解決辦法 見此
學會使用display:-webkit-box的布局，能很好地幫我們做到頁面自適應(yīng)畏腕，譬如 導(dǎo)航欄 這些個人覺得特別適合缴川，具體使用方法此處不敘述
使用 a 標簽的話，盡量讓 a 標簽 block 描馅，盡量讓用戶可點擊區(qū)域最大化
兩個頁面使用了transform之后把夸，頁面下的z-index有時就會失效，我遇到過铭污，但沒去認真探究恋日，只是把z-index提高就好了，如果遇到這個問題的嘹狞，詳細可以 看這
在iOS中岂膳，當你點擊比如 input 準備輸入時，虛擬鍵盤彈出磅网，整個視窗的 高度 就會變?yōu)?減去鍵盤 的高度谈截，加入你在底部有fixed的元素比如btn，這個元素就會跑上來知市，一般都不會太美觀傻盟。我是當focus時就把它設(shè)為absolute，視情況而定
禁止用戶選中文字 -webkit-user-select:none
當你把input設(shè)為 width:100%時嫂丙，有時可能會遇到input的寬度超出了屏幕娘赴，這時可對input加一個屬性 box-sizing:border-box
關(guān)于box-sizing:border-box，此屬性是把邊框的高寬包含在盒子的高寬中跟啤，假如你設(shè)置兩個元素float且各占50%诽表，又都有border時，用這個屬性就可以完美地讓它們能顯示在同一行
要table的td用col設(shè)置了寬度后超出部分隱藏的話給table加屬性table-layout:fixed（固定寬度布局）
如果想改變 placeholder 里的文字隅肥，需要用css偽類 ::-webkit-input-placeholder{color:#ccc}
二. JS部分
如果使用jquery綁定touch事件的話竿奏，獲取touchstart，touchmove的觸點坐標用 e.originalEvent.targetTouches[0].pageX腥放，獲取touchend則用 e.originalEvent.changedTouches[0].pageX
利用style獲取獲取transform的rotate值
parseInt(/rotateX((.*?))/.exec(getALL.style.webkitTransform)[1])
如果頁面一開始沒有style值泛啸，rotate是寫在CSS里的，需要用到getComputedStyle秃症，具體請看這里 候址。
有些版本的iphone4中， audio和video默認播放事件不會觸發(fā)种柑，比如使用window.onload或計時器等都不能觸發(fā)播放岗仑，必須用JS寫事件讓用戶手動點擊觸發(fā)才會開始播放
想要在touchmove:function(e,參數(shù)一)加一個參數(shù)，結(jié)果直接使用e.preventDefault() 就會 e 報錯聚请，處理方法為
touchmove:function(e,參數(shù)一){
var e=arguments[0]
e.preventDefault()
}
HTML5的新js API有新的選擇器荠雕，比如querySelector(".class #id")和querySelectorAll(".class element")。
點擊一個元素時，使用touchstart會立即觸發(fā)炸卑，而使用click則用有大概0.3s的延遲
判斷是否來自微信瀏覽器
function isFromWeiXin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
}
return false;
}
判斷手機的類型
var user="";
if (/android/i.test(navigator.userAgent)){
// android
user="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
// ios
user="0";
}
微信瀏覽器里均不能打開下載的鏈接既鞠，需在瀏覽器打開
如果在網(wǎng)頁里嵌套一個iframe，src為其他的網(wǎng)址等盖文，當在微信瀏覽器打開時损趋，如果irame里的頁面過大，則iframe的src不能加載（具體多大不知道椅寺，只是遇到過）
微信升級到6.0后，在微信網(wǎng)頁里需要用到設(shè)置分享的標題等蒋失，需要用到JSSDK返帕，同時去微信公眾平臺里綁定里放置網(wǎng)頁的域名。 不過JSSDK也不是所有問題都解決了篙挽，在android里點擊分享到朋友圈時就觸發(fā)了分享成功的回調(diào)函數(shù)荆萤，即使取消分享也已經(jīng)觸發(fā)了成功的函數(shù)（現(xiàn)在不知道是否有修復(fù)，如果遇到了這類問題铣卡，應(yīng)該就是這個原因）
