1. IOS移動端click事件300ms的延遲響應
移動設備上的web網頁是有300ms延遲的良蛮，玩玩會造成按鈕點擊延遲甚至是點擊失效贱纠。這是由于區(qū)分單擊事件和雙擊屏幕縮放的歷史原因造成的,
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網頁能比較好的展示在手機端上峭竣，使用了雙擊縮放(double tap to zoom)的方案粒督，比如你在手機上用瀏覽器打開一個PC上的網頁彼棍，你可能在看到頁面內容雖然可以撐滿整個屏幕娃惯，但是字體跷乐、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分趾浅，你就能看清該部分放大后的內容愕提，再次雙擊后能回到原始狀態(tài)馒稍。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例浅侨。
原因就出在瀏覽器需要如何判斷快速點擊上纽谒，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接<a href="#"></a>如输，此處瀏覽器會先捕獲該次單擊鼓黔，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進行縮放操作，所以挨决，捕獲第一次單擊后请祖，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進行下一次點擊脖祈，則瀏覽器會做單擊跳轉鏈接的處理肆捕，如果t時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉盖高，轉而進行對該部分區(qū)域頁面的縮放操作慎陵。那么這個時間區(qū)間t有多少呢？在IOS safari下喻奥，大概為300毫秒席纽。這就是延遲的由來。造成的后果用戶純粹單擊頁面撞蚕，頁面需要過一段時間才響應润梯，給用戶慢體驗感覺，對于web開發(fā)者來說是甥厦，頁面js捕獲click事件的回調函數(shù)處理纺铭，需要300ms后才生效，也就間接導致影響其他業(yè)務邏輯的處理刀疙。
解決方案：
fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊舶赔，tap事件也是為了解決在click的延遲問題
觸摸事件的響應順序為 touchstart --> touchmove --> touchend --> click,也可以通過綁定ontouchstart事件，加快對事件的響應谦秧，解決300ms延遲問題
2.一些情況下對非可點擊元素如(label,span)監(jiān)聽click事件竟纳，ios下不會觸發(fā)，css增加cursor:pointer就搞定了疚鲤。
3. 三星手機遮罩層下的input锥累、select、a等元素可以被點擊和focus(點擊穿透)
問題發(fā)現(xiàn)于三星手機集歇，這個在特定需求下才會有桶略，因此如果沒有類似問題的可以不看。首先需求是浮層操作，在三星上被遮罩的元素依然可以獲取focus删性、click亏娜、change)，有兩種解決方案蹬挺，
1.是通過層顯示以后加入對應的class名控制维贺，截斷顯示層下方可獲取焦點元素的事件獲取
2.是通過將可獲取焦點元素加入的disabled屬性，也可以利用屬性加dom鎖定的方式（disabled的一種變換方式）
4. h5底部輸入框被鍵盤遮擋問題
h5頁面有個很蛋疼的問題就是巴帮，當輸入框在最底部溯泣，點擊軟鍵盤后輸入框會被遮擋￠偶耄可采用如下方式解決
var oHeight = $(document).height(); //瀏覽器當前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
? 關于Web移動端Fixed布局的解決方案垃沦，這篇文章也不錯
http://efe.baidu.com/blog/mobile-fixed-layout/
5.不讓 Android 手機識別郵箱
<meta content="email=no" name="format-detection" />
6.禁止 iOS 識別長串數(shù)字為電話
<meta content="telephone=no" name="format-detection" />
7.禁止 iOS 彈出各種操作窗口
-webkit-touch-callout:none
8.消除 transition 閃屏
-webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
-webkit-backface-visibility: hidden; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/
9.iOS 系統(tǒng)中文輸入法輸入英文時，字母之間可能會出現(xiàn)一個六分之一空格
可以通過正則去掉 ? ? ?this.value = this.value.replace(/\u2006/g, '');
10.禁止ios和android用戶選中文字
-webkit-user-select:none
11.在ios和andriod中,audio元素和video元素在無法自動播放
應對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})12.ios下取消input在輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
13.android下取消輸入語音按鈕
input::-webkit-input-speech-button {display: none}14 ?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);
16.fixed定位缺陷
ios下fixed元素容易定位出錯肢簿，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好蜻拨，軟鍵盤彈出時池充，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案：?可用iScroll插件解決這個問題
17.阻止旋轉屏幕時自動調整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}18 Input 的placeholder會出現(xiàn)文本位置偏上的情況
input 的placeholder會出現(xiàn)文本位置偏上的情況：PC端設置line-height等于height能夠對齊，而移動端仍然是偏上缎讼，解決是設置line-height：normal
19 往返緩存問題
點擊瀏覽器的回退收夸，有時候不會自動執(zhí)行js，特別是在mobilesafari中血崭。這與往返緩存(bfcache)有關系卧惜。
解決方法 ：window.onunload = function(){};20. calc的兼容性處理
CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴夹纫。
Android瀏覽器目前仍然不支持calc咽瓷，所以要在之前增加一個保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}21 iOS6下偽類:hover
除了<a>之外的元素無效；在Android下則有效捷凄。類似
div#topFloatBar_l:hover #topFloatBar_menu { display:block; }這樣的導航顯示在iOS6點擊沒有點擊效果忱详，只能通過增加點擊偵聽器給元素增減class來控制子元素围来。
22 在移動端修改難看的點擊的高亮效果跺涤，iOS和安卓下都有效：
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}不過這個方法在現(xiàn)在的安卓瀏覽器下，只能去掉那個橙色的背景色监透，點擊產生的高亮邊框還是沒有去掉桶错，有待解決！
一個CSS3的屬性胀蛮，加上后院刁，所關聯(lián)的元素的事件監(jiān)聽都會失效，等于讓元素變得“看得見粪狼，點不著”退腥。IE到11才開始支持任岸，其他瀏覽器的當前版本基本都支持。詳細介紹見這里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none;
23. Zepto點透的解決方案
zepto的tap是通過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發(fā)的,在點擊完成時的tap事件(touchstart\touchend)需要冒泡到document上才會觸發(fā)狡刘，而在冒泡到document之前享潜，用戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會觸發(fā)click事件的,因為click事件有延遲觸發(fā)(這就是為什么移動端不用click而用tap的原因)(大概是300ms,為了實現(xiàn)safari的雙擊事件的設計)，所以在執(zhí)行完tap事件之后嗅蔬，彈出來的選擇組件馬上就隱藏了剑按，此時click事件還在延遲的300ms之中，當300ms到來的時候澜术，click到的其實不是完成而是隱藏之后的下方的元素艺蝴，如果正下方的元素綁定的有click事件此時便會觸發(fā)，如果沒有綁定click事件的話就當沒click鸟废，但是正下方的是input輸入框(或者select選擇框或者單選復選框)猜敢，點擊默認聚焦而彈出輸入鍵盤，也就出現(xiàn)了上面的點透現(xiàn)象盒延。
引入fastclick.js锣枝，在頁面中加入如下js代碼
1 window.addEventListener( "load", function() {
2 FastClick.attach( document.body );
3 }, false );或者有zepto或者jQuery的js里面加上
1 $(function() {
2 FastClick.attach(document.body);
3 });當然require的話就這樣：
1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);方案二：用touchend代替tap事件并阻止掉touchend的默認行為preventDefault()
1 $("#cbFinish").on("touchend", function (event) {
2 //很多處理比如隱藏什么的
3 event.preventDefault();
4 });方案三：延遲一定的時間(300ms+)來處理事件
1 $("#cbFinish").on("tap", function (event) {
2 setTimeout(function(){
3 //很多處理比如隱藏什么的
4 },320);
5 }); ?24. user-select:none;造成iPhone5上輸入框的光標不顯示，而光標不顯示造成無法連續(xù)輸入兰英。
1撇叁、外觀
??? A、頁面高度渲染錯誤
? ? 在各移動端瀏覽器中經常會出現(xiàn)這種頁面高度100%的渲染錯誤畦贸，頁面低端和系統(tǒng)自帶的導航條重合了陨闹，高度的不正確我們需要重置修正它，通過javascript代碼重置掉：
document.documentElement.style.height = window.innerHeight + 'px';
? ??B薄坏、疊加區(qū)高亮
? ? 在部分android機型中點擊頁面某一塊區(qū)域可能會出現(xiàn)如圖所示的黃色框秒閃趋厉，這是部分機型系統(tǒng)自身的默認定制樣式，給該元素一個CSS樣式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);
2胶坠、行為
? ??A君账、事件無法被觸發(fā)
? ? 在部分android機型的微信環(huán)境中會出現(xiàn)事件無法觸發(fā)、表單無法輸入的情況沈善，我們針對需要輸入或者觸發(fā)事件的元素設置樣式：-webkit-transform: translate3d(0,0,0)?乡数，不過新版本的微信已經直接修復了該問題。
? ??B闻牡、:active?效果不兼容
? ? 在android 4.0版本以下CSS :active偽狀態(tài)效果無法兼容净赴，我們給該元素的touch系列的事件（touchstart/touchend/touchmove）綁定一個空匿名方法:
var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);
3、應用
??? A罩润、瀏覽器崩潰
var act = function(){
window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);? ? 解綁函數(shù)寫在了事件處理中導致小米手機中的微信崩潰玖翅，那么我們不要將解綁時間寫在事件處理中即可。
??? B、預加載金度、自動播放無效
? ? 如上表所示应媚，經過簡單的測試發(fā)現(xiàn)預加載、自動播放的有效性受操作系統(tǒng)猜极、瀏覽器（webview）珍特、版本等的影響，蘋果官方規(guī)定必須由用戶手動觸發(fā)才會載入音頻魔吐，那么我們捕捉一次用戶輸入后扎筒，讓音頻加載實現(xiàn)預加載:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
? ??C、無法同時播放多音頻
? ? 在android設備中,播放后一音頻會打斷前一音頻酬姆，而不會同步播放,這個是目前系統(tǒng)資深決定的嗜桌，我們只有采取優(yōu)雅降權的方法讓android選擇不一樣風格的音頻前后切換播放而不是同時播放，達到與預期接近的音頻效果辞色。
? ??D骨宠、不支持局部滾動
? ? 在android 4.0版本以下在body(html)元素之外的元素?overflow:scroll?樣式設置滾動條無效，這里有兩種解決方案:
? ? 1相满、巧用布局直接設置樣式滾動條在body(html)上层亿，其他元素“錯覺滾動”。
? ? 2立美、利用iscroll匿又、自寫js控制translate、scrollTop模擬
4建蹄、系統(tǒng)/硬件
? ??A碌更、怪異懸浮的表單
? ? 在部分android?機型中的輸入框可能會出現(xiàn)如圖怪異的多余的浮出表單，經過觀察與測試發(fā)現(xiàn)只有input:password類型的輸入框存在洞慎，那么我們只要使用input:text類型的輸入框并通過樣式-webkit-text-security: disc;?隱藏輸入密碼從而解決痛单。
? ??B、錯誤出現(xiàn)滾動條
? ? 在游戲內嵌頁中出現(xiàn)了不應該出現(xiàn)的滾動條劲腿，而且內容并沒有超出內容區(qū)寬度旭绒，經過測試overflow:hidden?無效，通過一系列嘗試使用古老的?<body scroll="no">?寫法解決焦人，多嘗試一下不同的寫法和屬性會有不一樣的驚喜哦挥吵！
? ??C、鏈接打開系統(tǒng)瀏覽器
? ? 在游戲內webview的部分android機型中可能會出現(xiàn)點擊鏈接調用系統(tǒng)瀏覽器的情況垃瞧，這是一個非常不好的體驗蔫劣。那么我們嘗試給這個元素添加?target="_blank"'?屬性有可能解決坪郭，如果還不能解決那么需要修改IOS或android原生系統(tǒng)函數(shù)了个从。
? ??D、Flex box?不兼容
? ? 在游戲內嵌webview中碰到Flex box布局不兼容的情況，圖中所示下面部分的導航錯位了嗦锐，雖然之前有仔細查看過Flex box的兼容性嫌松，但是在游戲內嵌頁中無法確定其調用的系統(tǒng)瀏覽器版本及兼容，所以導致錯誤奕污，所以我們寫完整歷史版本呢的3種Flex box?解決萎羔。那么我們思考在寫頁面過程中還是本著保守穩(wěn)定的方式書寫樣式可以減少不不要的麻煩。
