一、瀏覽器
【UC瀏覽器】video標簽脫離文檔流
場景：<video>標簽的父元素(祖輩元素)設置transform樣式后，<video>標簽會脫離文檔流。
測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。
Demo：http://t.cn/zj3xiyu
解決方案：不使用transform屬性。translate用top、margin等屬性替代。
【UC瀏覽器】video標簽總在最前
場景：<video>標簽總是在最前（可以理解為video標簽的z-index屬性是Max）。
測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。
【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象
場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素。
在8.6的版本,這個情況直接出現。
在8.7之后的版本,當同輩元素的height大於713這個「神奇」的數值時,才會被遮擋。
測試環境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。
Demo：http://t.cn/zYLTSg6
【QQ手機瀏覽器】不支持HttpOnly
場景：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效。JavaScript可以直接讀取設置了HttpOnly的Cookie值。
測試環境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。
【MIUI原生瀏覽器】瀏覽器地址欄hash不改變
場景：location.hash 被賦值后，地址欄的地址不會改變。
但實際上 location.href 已經更新了，通過JavaScript可以順利獲取到更新后的地址。
雖然不影響正常訪問，但用戶無法將訪問過程中改變hash后的地址存為書簽。
測試環境：MIUI 4.0
【Chrome Mobile】fixed元素無法點擊
場景：父元素設置position: fixed;
子元素設置position: absolute;
此時，如果父元素/子元素還設置了overflow: hidden 則出現“父元素遮擋該子元素“的bug。
視覺(view)層並沒有出現遮擋，只是無法觸發綁定在該子元素上的事件。可理解為：「看到點不到」。
補充： 頁面往下滾動，觸發position: fixed;的特性時，才會出現這個bug，在最頂不會出現。
測試平台： 小米1S，Android4.0的Chrome18
demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html
解決辦法： 把父元素和子元素的overflow: hidden去掉。
二、 css部分
- body如果設置height:100%;overflow:hidden是依然可以滑動的，如果需禁止，要再加一層div設置 height:100%加overflow：hidden（html,body加height:100%） ，這樣元素超出body的高度也不能滑動了。
或者同時給html，body加height:100%;overflow:hidden -
meta標簽
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移動端加上這個標簽才是真正的自適應，不加的話，假如你把一個980px寬度(手機端常規是980)的PC網頁放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動設備對頁面 做了縮小優化，所以字體等都相應縮小了（980px是相對於手機像素的，我的是超過1000px多一些就出現滾動條了，這個沒具體研究）。
<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允許全屏瀏覽
關於 initial-scale=1 ，這個參照iphone5的尺寸320*568，如果你頁面按照640*1136做的話，scale就設為0.5
<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
- 做全屏顯示的圖片時，一般為了兼容大部分的手機，圖片尺寸一般設為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譬如導航等，可以用absolute達到一樣的效果，把body設為100%；將元素absolute到body上即可，不過這樣不能讓body滾動，如果需要有滾動的地方，就放在div中滾動
-
在移動端做動畫效果的話，如果通過改變絕對定位的top，或者margin的話做出來的效果很差，很不流暢，而使用css3的transition或者animation的效果將會非常棒（這一方面IOS比android又要好不少）。
如果用translate3d來實現動畫，會開啟GPU加速，硬件配置差的安卓用起來會耗性能，需慎用（借用1樓評論的） -
使用圖片時，會發現圖片下總是有大概4px的空白，（原因據說圖片是inline，觸發baseline什么的。。。）常用解決方法有
img{display:block}；
img{vertical-align:top}也可取其他幾個值，視情況而定
-
學會使用display:-webkit-box的布局，能很好地幫我們做到頁面自適應，譬如 導航欄 這些個人覺得特別適合，具體使用方法此處不敘述
-
使用 a 標簽的話，盡量讓 a 標簽 block ，盡量讓用戶可點擊區域最大化
-
兩個頁面使用了transform之后，頁面下的z-index有時就會失效，我遇到過，但沒去認真探究，只是把z-index提高就好了。
-
在iOS中，當你點擊比如 input 准備輸入時，虛擬鍵盤彈出，整個視窗的 高度 就會變為 減去鍵盤 的高度，加入你在底部有fixed的元素比如btn，這個元素就會跑上來，一般都不會太美觀。我是當focus時就把它設為absolute，視情況而定
-
禁止用戶選中文字 -webkit-user-select:none
-
當你把input設為 width:100%時，有時可能會遇到input的寬度超出了屏幕，這時可對input加一個屬性 box-sizing:border-box
關於box-sizing:border-box，此屬性是把邊框的高寬包含在盒子的高寬中，假如你設置兩個元素float且各占50%，又都有border時，用這個屬性就可以完美地讓它們能顯示在同一行
-
要table的td用col設置了寬度后超出部分隱藏的話給table加屬性table-layout:fixed（固定寬度布局）
-
如果想改變 placeholder 里的樣式，需要用css偽類。 如 ::-webkit-input-placeholder{color:#ccc}
- 做一個方向箭頭比如 “>” 時，可以用一個正方形的div，設置border:1px 1px 0 0；然后rotate(45deg)
-
CSS權重：style是1000，id是100，class是10，普通如li、div和偽類是1，通用如*是0；
- 使用rem時，設某個div比如的height:3rem;line-height:1.5rem;overflow:hidden;時，在某些android手機上可能會出現顯示不止兩行,第三行會顯示點頭部。 解決：利用js獲取文字line-height再去設置div高度
三. 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默認播放事件不會觸發，比如使用window.onload或計時器等都不能觸發播放，必須用JS寫事件讓用戶手動點擊觸發才會開始播放
-
想要在touchmove:function(e,參數一)加一個參數，結果直接使用e.preventDefault()
touchmove:function(e,參數一){ var e=arguments[0] e.preventDefault()}就會 e 報錯，處理方法為 -
HTML5的新js API有新的選擇器，比如querySelector(".class #id")和querySelectorAll(".class element")。
-
點擊一個元素時，使用touchstart會立即觸發，而使用click則用有大概0.3s的延遲
- 用e.preventDefault()會阻止的scroll，click等事件
四. 微信部分
-
判斷是否來自微信瀏覽器
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"; } -
微信瀏覽器里均不能打開下載的鏈接，需在瀏覽器打開
-
如果在網頁里嵌套一個iframe，src為其他的網址等，當在微信瀏覽器打開時，如果irame里的頁面過大，則iframe的src不能加載（具體多大不知道，只是遇到過）
- 微信升級到6.0后，在微信網頁里需要用到設置分享的標題等，需要用到JSSDK，同時去微信公眾平台里綁定里放置網頁的域名。
不過JSSDK也不是所有問題都解決了，在android里點擊分享到朋友圈時就觸發了分享成功的回調函數，即使取消分享也已經觸發了成功的函數（現在不知道是否有修復，如果遇到了這類問題，應該就是這個原因）