1、click300ms延遲？
- 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、阻止旋轉屏幕時自動調整字體大小
移動端開發時，屏幕有豎屏和橫屏模式，當屏幕進行旋轉時，字體大小則有可能會發生變化，從而影響頁面布局的整體樣式，為避免此類情況發生，只需設置如下樣式即可
1 * {
2 -webkit-text-size-adjust: none;
3 }
4、修改移動端難看的點擊的高亮效果，iOS和安卓下都有效
1 * {
2 -webkit-tap-highlight-color: rgba(0,0,0,0);
3 }
不過這個方法在現在的安卓瀏覽器下，只能去掉那個橙色的背景色，點擊產生的高亮邊框還是沒有去掉，有待解決！
一個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，所以要在之前增加一個保守尺寸：
1 div {
2 width: 95%;
3 width: -webkit-calc(100% - 50px);
4 width: calc(100% - 50px);
5 }
10、fixed定位缺陷
iOS下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位，android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位 。iOS4下不支持position:fixed
解決方案： 可用iScroll插件解決這個問題
11、一些情況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發
針對此種情況只需要對不觸發click事件的那些元素添加一行css代碼即可
cursor: pointer;
12、消除transition閃屏問題
1 /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ 2 -webkit-transform-style: preserve-3d; 3 /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/ 4 -webkit-backface-visibility: hidden;
13、CSS動畫頁面閃白,動畫卡頓
解決方法:
1.盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
2.開啟硬件加速
1 -webkit-transform: translate3d(0, 0, 0); 2 -moz-transform: translate3d(0, 0, 0); 3 -ms-transform: translate3d(0, 0, 0); 4 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、浮動子元素撐開父元素盒子高度
解決方法如下：
1 父元素設置為 overflow: hidden; 2 父元素設置為 display: inline-block; 等
這里兩種方法都是通過設置css屬性將浮動元素的父元素變成間接變成BFC元素，然后使得子元素高度可以撐開父元素。這里需要注意的時，最好使用方法1， 因為inline-block元素本身會自帶一些寬高度撐開其本身。
17、往返緩存問題
點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關系。 解決方法 ：
window.onunload = function () {};
18、overflow-x: auto在iOS有兼容問題
解決方法：
-webkit-overflow-scrolling: touch;
二、vue移動開發特有坑以及小技巧分享
1、iOS原始輸入法問題
iOS原始輸入法，中文輸入時，無法觸發keyup事件，且keyup.enter事件無論中英文，都無法觸發
解決方法：
- 改用input事件進行監聽
- 將keyup監聽替換成值的watch
- 讓使用者安裝三方輸入法，比如搜狗輸入法（不太現實）
2、input元素失焦問題
業務場景重現： 項目中需要寫一個搜索組件，相關代碼如下
1 <template> 2 <div class="y-search" :style="styles" :clear="clear"> 3 <form action="#" onsubmit="return false;"> 4 <input type="search" 5 class="y-search-input" 6 ref="search" 7 v-model='model' 8 :placeholder="placeholder" 9 @input="searchInputFn" 10 @keyup.enter="searchEnterFn" 11 @foucs="searchFocusFn" 12 @blur="searchBlurFn" 13 /> 14 <y-icons class="search-icon" name="search" size="14"></y-icons> 15 </form> 16 <div v-if="showClose" @click="closeFn"> 17 <y-icons class="close-icon" name='close' size='12'></y-icons> 18 </div> 19 </div> 20 </template>
其中我需要在enter的時候進行對應的搜索操作並實現失焦，解決方法其實很簡單，在enter時進行DOM操作即可
1 searchEnterFn (e) {
2 document.getElementsByClassName('y-search-input')[0].blur()
3 // dosomething yourself
4 }
對了，這里還有一個坑，就是在移動端使用input類型為search的時候，必須使用form標簽包裹起來，這樣在移動端呼出鍵盤的enter才會是搜索按鈕，否則只是默認的enter按鈕。