1.active兼容處理 即偽類 :active 失效
2.圓角bug
3.啟動畫面，避免加載時的白屏
4.IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
5.IOS鍵盤字母輸入，默認首字母大寫
6.移動端點擊300ms延遲
7.移動端點透問題
8.關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時
9.移動端 HTML5 audio autoplay 失效問題
1、active兼容處理 即偽類 :active 失效
方法一：body添加ontouchstart
<body ontouchstart="">
方法二：js給 document 綁定 touchstart 或 touchend 事件
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>
2、圓角bug
某些Android手機圓角失效
background-clip: padding-box;
3、啟動畫面
<link rel="apple-touch-startup-image" href="start.png"/>
iOS下頁面啟動加載時顯示的畫面圖片，避免加載時的白屏?？梢酝ㄟ^madia來指定不同的大?。?/p>
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
4、 IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
問題是這樣的，用input search做模糊搜索的時候，在鍵盤里面輸入關(guān)鍵詞，會通過ajax后臺查詢，然后返回數(shù)據(jù)，然后再對返回的數(shù)據(jù)進行關(guān)鍵詞標(biāo)紅。
用input監(jiān)聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才能相應(yīng)！
解決辦法：
可以用html5的oninput事件去代替keyup
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
然后就達到類似keyup的效果！
5、IOS鍵盤字母輸入，默認首字母大寫
解決方案，設(shè)置如下屬性
<input type="text" autocapitalize="off" />
6、移動端點擊300ms延遲
300ms尚可接受，不過因為300ms產(chǎn)生的問題，我們必須要解決。300ms導(dǎo)致用戶體驗并不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。
推薦兩個js，一個是fastclick，一個是tap.js
關(guān)于300ms延遲，具體請看。
7、移動端點透問題
案例如下：
<div id="haorooms">點頭事件測試</div>
<a href="#">www.xxx.com</a>
div是絕對定位的蒙層,并且z-index高于a。而a標(biāo)簽是頁面中的一個鏈接，我們給div綁定tap事件：
$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});
我們點擊蒙層時 div正常消失，但是當(dāng)我們在a標(biāo)簽上點擊蒙層時，發(fā)現(xiàn)a鏈接被觸發(fā)，這就是所謂的點透事件。
原因：touchstart 早于 touchend 早于click。 亦即click的觸發(fā)是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發(fā)之后蒙層隱藏， 此時 click還沒有觸發(fā)，300ms之后由于蒙層隱藏，我們的click觸發(fā)到了下面的a鏈接上。
解決：
（1）盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
（2）用 fastclick
（3）用preventDefault阻止a標(biāo)簽的click
（4）延遲一定的時間(300ms+)來處理事件（不推薦）
（5）以上一般都能解決，實在不行就換成click事件。
下面介紹一下touchend事件，如下：
$("#haorooms").on("touchend", function (event) {
event.preventDefault();
});
8、關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時
字母之間可能會出現(xiàn)一個六分之一空格可以通過正則去掉
this.value = this.value.replace(/\u2006/g, '');
9、移動端 HTML5 audio autoplay 失效問題
這個不是 BUG，由于自動播放網(wǎng)頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會禁止自動播放和使用 JS 的觸發(fā)播放，必須由用戶來觸發(fā)才可以播放。
解決方法思路：先通過用戶 touchstart 觸碰，觸發(fā)播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）。
解決代碼：
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
