文章轉(zhuǎn)自：https://zhuanlan.zhihu.com/p/28206065
1.IOS移動(dòng)端click事件300ms的延遲相應(yīng)
移動(dòng)設(shè)備上的web網(wǎng)頁(yè)是有300ms延遲的小渊，往往會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效逾冬。
這是由于區(qū)分單機(jī)事件和雙擊屏幕縮放的歷史原因造成的。
解決方式：
fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲
zepto的touch模塊蜡秽，tap事件也是為了解決在click的延遲問題
觸摸屏的相應(yīng)順序?yàn)閠ouchstart-->touchmove-->touchend-->click，也可以通過綁定ontouchstart事件，加快事件的響應(yīng)，解決300ms的延遲問題
2.一些情況下對(duì)非可點(diǎn)擊元素（label，span）監(jiān)聽click事件喉磁，iso下不會(huì)觸發(fā)谓苟，css增加cursor：pointer就搞定了。
3.h5底部輸入框被鍵盤遮擋問題
h5頁(yè)面有個(gè)很蛋疼的問題就是协怒，當(dāng)輸入框在最底部涝焙，點(diǎn)擊軟鍵盤后輸入框會(huì)被遮擋≡邢荆可采用如下方式解決
var oHeight = $(document).height(); //瀏覽器當(dāng)前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
4.不讓 Android 手機(jī)識(shí)別郵箱
<meta content="email=no" name="format-detection" />
5.禁止 iOS 識(shí)別長(zhǎng)串?dāng)?shù)字為電話
<meta content="telephone=no" name="format-detection" />
6.禁止 iOS 彈出各種操作窗口
-webkit-touch-callout:none
7.消除 transition 閃屏
-webkit-transform-style: preserve-3d; /設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D/
-webkit-backface-visibility: hidden; /(設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏)/
8.iOS 系統(tǒng)中文輸入法輸入英文時(shí)仑撞，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格可以通過正則去掉
this.value = this.value.replace(/\u2006/g, '');
9.禁止ios和android用戶選中文字
-webkit-user-select:none
10.CSS動(dòng)畫頁(yè)面閃白,動(dòng)畫卡頓
解決方法:
1.盡可能地使用合成屬性transform和opacity來設(shè)計(jì)CSS3動(dòng)畫，不使用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);
11.fixed定位缺陷
ios下fixed元素容易定位出錯(cuò)妖滔，軟鍵盤彈出時(shí)隧哮，影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好，軟鍵盤彈出時(shí)座舍，不會(huì)影響fixed元素定位
ios4下不支持position:fixed
解決方案： 可用iScroll插件解決這個(gè)問題
