1、click300ms延遲？
講道理，現在開發移動端基本是不會有這麼一個問題的。但作爲移動端以前的經典坑，我這裏也拿出來說上一說吧。
移動設備上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。這是由於區分單擊事件和雙擊屏幕縮放的歷史原因造成的。但在2014年的Chrome 32版本已經把這個延遲去掉了，so you know。但如果你還是出現了300ms的延遲問題，也是有路子搞定的。
解決方案如下：
- fastclick可以解決在手機上點擊事件的300ms延遲
- zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
- 觸摸事件的響應順序爲 touchstart --> touchmove --> touchend --> click,也可以通過綁定ontouchstart事件，加快對事件的響應，解決300ms延遲問題
- 若移動設備兼容性正常的話（IE/Firefox/Safari(IOS 9.3)及以上），只需加上一個meta標籤
<meta name="viewport" content="width=device-width">
即把viewport設置成設備的實際像素，那麼就不會有這300ms的延遲。
2、移動端樣式兼容處理
當今的手機端，各式各樣的手機，屏幕分辨率也是各有不同，爲了讓頁面可以可以兼容各大手機，解決方案如下
- 設置meta標籤viewport屬性，使其無視設備的真實分辨率，直接通過dpi，在物理尺寸和瀏覽器之間重設分辨率，從而達到能有統一的分辨率的效果。並且禁止掉用戶縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
- 使用rem進行屏幕適配，設置好root元素的font-size大小，然後在開發的時候，所有與像素有關的佈局統一換成rem單位。針對不同的手機，使用媒體查詢對root元素font-size進行調整
3、阻止旋轉屏幕時自動調整字體大小
移動端開發時，屏幕有豎屏和橫屏模式，當屏幕進行旋轉時，字體大小則有可能會發生變化，從而影響頁面佈局的整體樣式，爲避免此類情況發生，只需設置如下樣式即可
* {
-webkit-text-size-adjust: none;
}
4、修改移動端難看的點擊的高亮效果，iOS和安卓下都有效
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
不過這個方法在現在的安卓瀏覽器下，只能去掉那個橙色的背景色，點擊產生的高亮邊框還是沒有去掉，有待解決！
一個CSS3的屬性，加上後，所關聯的元素的事件監聽都會失效，等於讓元素變得“看得見，點不着”。IE到11纔開始支持，其他瀏覽器的當前版本基本都支持。詳細介紹見這裏：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none;
5、iOS下取消input在輸入的時候英文首字母的默認大寫
<input type="text" autocapitalize="none">
6、禁止 iOS 識別長串數字爲電話
<meta name="format-detection" content="telephone=no" />
7、禁止 iOS 彈出各種操作窗口
-webkit-touch-callout: none;
8、禁止ios和android用戶選中文字
-webkit-user-select: none;
9、calc的兼容處理
CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。 Android瀏覽器目前仍然不支持calc，所以要在之前增加一個保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
10、fixed定位缺陷
iOS下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位，android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位 。iOS4下不支持position:fixed
解決方案： 可用iScroll插件解決這個問題
11、一些情況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發
針對此種情況只需要對不觸發click事件的那些元素添加一行css代碼即可
cursor: pointer;
12、消除transition閃屏問題
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-transform-style: preserve-3d; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/ -webkit-backface-visibility: hidden;
13、CSS動畫頁面閃白,動畫卡頓
解決方法:
1.儘可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
2.開啓硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
14、iOS系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一的空格
解決方法：通過正則去除
this.value = this.value.replace(/\u2006/g, '');
15、input的placeholder會出現文本位置偏上的情況
input 的placeholder會出現文本位置偏上的情況：PC端設置line-height等於height能夠對齊，而移動端仍然是偏上，解決方案時是設置css
line-height：normal;
16、浮動子元素撐開父元素盒子高度
解決方法如下：
- 父元素設置爲 overflow: hidden;
- 父元素設置爲 display: inline-block; 等
這裏兩種方法都是通過設置css屬性將浮動元素的父元素變成間接變成BFC元素，然後使得子元素高度可以撐開父元素。這裏需要注意的時，最好使用方法1， 因爲inline-block元素本身會自帶一些寬高度撐開其本身。
17、往返緩存問題
點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關係。 解決方法 ：
window.onunload = function () {};
18、overflow-x: auto在iOS有兼容問題
解決方法：
-webkit-overflow-scrolling: touch;
參考原文：https://my.oschina.net/qiangdada/blog/1555682