以前做pc端祟偷，也會(huì)遇到兼容性的問題察滑，不過說實(shí)話，腦海里全是ie的問題修肠，并沒有什么可特別注意的贺辰，可能是我不善總結(jié)，現(xiàn)在做移動(dòng)端（本來覺得移動(dòng)端很easy嵌施，所以沒放在眼里）饲化，so，我錯(cuò)了吗伤，我為自己的輕視高傲買單吃靠！
最近就遇見了一些兼容性bug，從網(wǎng)上找了資料足淆。
我覺得值得一寫的巢块，我都有試過的內(nèi)容。
先說一下viewport
先上模板
<meta charset="utf-8">
<!--主要I是強(qiáng)制讓文檔的寬度與設(shè)備寬度保持1:1缸浦，最大寬度1.0夕冲，禁止屏幕縮放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--這個(gè)也是iphone私有標(biāo)簽裂逐，允許全屏瀏覽歹鱼。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有標(biāo)簽，iphone頂端狀態(tài)條的樣式卜高。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止數(shù)字自動(dòng)識(shí)別為電話號(hào)碼弥姻，這個(gè)比較有用南片，因?yàn)橐淮當(dāng)?shù)字在iphone上會(huì)顯示成藍(lán)色，樣式加成別的顏色也是不生效的庭敦。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email識(shí)別-->
<meta content="email=no" name="format-detection">
- 寫背景圖時(shí)最好加上top left 或者0 0 不然寫運(yùn)動(dòng)效果時(shí)容易出現(xiàn)跳
禁止復(fù)制疼进、選中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
蘋果手機(jī)固定定位有bug 檢查html和body是不是設(shè)置了overflow-x:hidden;
給不同屏幕大小的手機(jī)設(shè)置特殊樣式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
IOS中input鍵盤事件keyup、keydown秧廉、keypress支持不是很好, 用input監(jiān)聽鍵盤keyup事件伞广，在安卓手機(jī)瀏覽器中是可以的，但是在ios手機(jī)瀏覽器中用輸入法輸入之后疼电，并未立刻相應(yīng)keyup事件嚼锄，只有在通過刪除之后才可以響應(yīng)
方法：可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
ios 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋
解決方式如下：
input,textarea {
border: 0;
-webkit-appearance: none;
}
消除 IE10 里面的那個(gè)叉號(hào):input:-ms-clear{display:none;}
手機(jī)上的flex布局時(shí)會(huì)有兼容性問題，只用新版本的會(huì)出現(xiàn)安卓手機(jī)不識(shí)別的現(xiàn)象
flex布局對于低版本的安卓蔽豺，不支持flex-wrap:wrap屬性区丑，但是ios系統(tǒng)支持換行屬性，這個(gè)時(shí)候如何解決呢修陡？當(dāng)然是不使用換行沧侥，用其他方式代替。
.box{
display: -webkit-box;
/* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本語法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本語法: IE 10 */
display: -webkit-flex; /* 新版本語法: Chrome 21+ */
display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}
input 的placeholder屬性會(huì)使文本位置偏上
line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動(dòng)端解決方法
input type=number之后魄鸦，pc端出現(xiàn)上下箭頭
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
實(shí)現(xiàn)android和ios系統(tǒng)手機(jī)打開相機(jī)并可選擇相冊功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
//獲取瀏覽器的userAgent,并轉(zhuǎn)化為小寫
var ua = navigator.userAgent.toLowerCase();
//判斷是否是蘋果手機(jī)宴杀，是則是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
$("input:file").removeAttr("capture");
};
})
移動(dòng)端 HTML5 audio autoplay 失效問題
這個(gè)不是 BUG，由于自動(dòng)播放網(wǎng)頁中的音頻或視頻号杏，會(huì)給用戶帶來一些困擾或者不必要的流量消耗婴氮，所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放，必須由用戶來觸發(fā)才可以播放盾致。
解決方法思路：先通過用戶 touchstart 觸碰主经，觸發(fā)播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）庭惜。
解決代碼：
document.addEventListener('touchstart',function() {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
移動(dòng)端 video在部分android機(jī)播放之后浮在最上層罩驻，設(shè)置z-index無效
這個(gè)目前沒有好的辦法解決
情景一：頁面有視頻，點(diǎn)擊頁面按鈕顯示彈出層（比如讓用戶輸入用戶信息）护赊，這時(shí)候視頻會(huì)出現(xiàn)在彈出層上面惠遏，是不是很-d疼？
方案：點(diǎn)擊按鈕時(shí)候把video隱藏hide骏啰，關(guān)閉彈出層show节吮，過程中視頻聲音還在
情景二：頁面很長，往下翻滾時(shí)判耕，視頻在播放透绩，脫離文檔流
方案：頁面滾動(dòng)到某一合適位置把video隱藏hide，回滾到某一位置show，過程中視頻聲音還在
有些說position可以解決帚豪，我沒有試
關(guān)于 iOS 系統(tǒng)中碳竟，中文輸入法輸入英文時(shí)，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格
this.value = this.value.replace(/\u2006/g,'');
關(guān)于 iOS 與 OS X 端字體的優(yōu)化(橫豎屏?xí)霈F(xiàn)字體加粗不一致等)
iOS 瀏覽器橫屏?xí)r會(huì)重置字體大小狸臣，設(shè)置 text-size-adjust 為 none 可以解決 iOS 上的問題莹桅，但桌面版 Safari 的字體縮放功能會(huì)失效，因此最佳方案是將 text-size-adjust 為 100% 烛亦。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
移動(dòng)端點(diǎn)擊300ms延遲
原因：瀏覽器興起初期诈泼，為了判斷用戶是雙擊還是單擊，就設(shè)置了一個(gè)時(shí)間段300ms此洲，用戶單擊后300ms后做事件處理厂汗，如果在300ms內(nèi)連續(xù)點(diǎn)擊，就判斷為雙擊呜师，做雙擊處理事件。
所以現(xiàn)在用click綁定事件呢贾节，就會(huì)有300ms延遲的問題汁汗。
300ms尚可接受，不過因?yàn)?00ms產(chǎn)生的問題栗涂，我們必須要解決知牌。300ms導(dǎo)致用戶體驗(yàn)并不是很好，解決這個(gè)問題斤程，我們一般在移動(dòng)端用tap事件來取代click事件角寸。
推薦兩個(gè)js，一個(gè)是fastclick忿墅，一個(gè)是tap.js
移動(dòng)端點(diǎn)透問題
案例如下：
<div id="haorooms">點(diǎn)頭事件測試</div>
<a href="www.baidu.net">www.baidu.com</a>
div是絕對定位的蒙層,并且z-index高于a扁藕。而a標(biāo)簽是頁面中的一個(gè)鏈接，我們給div綁定tap事件：
$('#haorooms').on('tap',function(){
$(this).hide();
});
我們點(diǎn)擊蒙層時(shí) div正常消失疚脐，但是當(dāng)我們在a標(biāo)簽上點(diǎn)擊蒙層時(shí)亿柑，發(fā)現(xiàn)a鏈接被觸發(fā)，這就是所謂的點(diǎn)透事件棍弄。
原因：
touchstart 早于 touchend 早于click望薄。 亦即click的觸發(fā)是有延遲的，這個(gè)時(shí)間大概在300ms左右呼畸，也就是說我們tap觸發(fā)之后蒙層隱藏痕支， 此時(shí) click還沒有觸發(fā)，300ms之后由于蒙層隱藏蛮原，我們的click觸發(fā)到了下面的a鏈接上卧须。
解決：
- 盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
- 用fastclick故慈，https://github.com/ftlabs/fastclick
- 用preventDefault阻止a標(biāo)簽的click
- 延遲一定的時(shí)間(300ms+)來處理事件 （不推薦）
- 以上一般都能解決板熊，實(shí)在不行就換成click事件。
下面介紹一下touchend事件察绷，如下：
$("#haorooms").on("touchend",function(event) {
event.preventDefault();
});