每次H5開(kāi)發(fā)，總會(huì)遇到一些兼容性bug瀑粥，現(xiàn)在總結(jié)下魔熏，供大家參考。
1)定位問(wèn)題：ios
2)寫(xiě)背景圖時(shí)最好加上top?left?或者0?0?不然寫(xiě)運(yùn)動(dòng)效果時(shí)容易出現(xiàn)跳
3)防止手機(jī)中網(wǎng)頁(yè)放大和縮小:
4)設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行:,content的默認(rèn)值是no
5)自動(dòng)識(shí)別電話(huà)號(hào)碼:,telephone=no可以禁用這功能,默認(rèn)值是no
6)禁止復(fù)制瘦麸、選中文本:
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
7) 設(shè)置緩存:
手機(jī)頁(yè)面通常在第一次加載后會(huì)進(jìn)行緩存谁撼，然后每次刷新會(huì)使用緩存而不是去重新向服務(wù)器發(fā)送請(qǐng)求。如果不希望使用緩存可以設(shè)置no-cache滋饲。
8) 蘋(píng)果手機(jī)固定定位有bug?檢查html和body是不是設(shè)置了overflow-x:hidden;
9) IOS手機(jī)中如果出現(xiàn)一個(gè)元素的層級(jí)非常高可還是被別的元素遮蓋的彤敛，那么就將該元素與別的元素同級(jí)
10)給不同屏幕大小的手機(jī)設(shè)置特殊樣式:
@media?only?screen??and?(min-device-width?:?320px)??and?(max-device-width?:?375px){ ? ? ? ? ? ? ?}
11)IOS中input鍵盤(pán)事件keyup、keydown了赌、keypress支持不是很好,用input監(jiān)聽(tīng)鍵盤(pán)keyup事件墨榄，在安卓手機(jī)瀏覽器中是可以的，但是在ios手機(jī)瀏覽器中用輸入法輸入之后勿她，并未立刻相應(yīng)keyup事件袄秩，只有在通過(guò)刪除之后才可以響應(yīng)
方法：可以用html5的oninput事件去代替keyup
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
12)、ios 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋
解決方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
13)逢并、消除 IE10 里面的那個(gè)叉號(hào):input:-ms-clear{display:none;}
14)之剧、關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時(shí)砍聊，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格可以通過(guò)正則去掉
1this.value = this.value.replace(/\u2006/g, '');
15)背稼、手機(jī)上的flex布局時(shí)會(huì)有兼容性問(wèn)題，只用新版本的會(huì)出現(xiàn)安卓手機(jī)不識(shí)別的現(xiàn)象
.box{
display:?-webkit-box;?/*?老版本語(yǔ)法:?Safari,?iOS,?Android?browser,?older?WebKit?browsers.?*/
display:?-moz-box;?/*?老版本語(yǔ)法:?Firefox?(buggy)?*/
display:?-ms-flexbox;?/*?混合版本語(yǔ)法:?IE?10?*/
display:?-webkit-flex;?/*?新版本語(yǔ)法:?Chrome?21+?*/
display:?flex;?/*?新版本語(yǔ)法:?Opera?12.1,?Firefox?22+?*/
}
.box>li{
-webkit-box-flex:?1.0;
box-flex:?1.0;
-webkit-flex:?1.0;
flex:?1;
width:?0;/*解決兼容性問(wèn)題*/
}
16)玻蝌、
html,body{
overflow:?hidden;/*手機(jī)上寫(xiě)overflow-x:hidden;會(huì)有兼容性問(wèn)題蟹肘，如果子級(jí)如果是絕對(duì)定位有運(yùn)動(dòng)到屏幕外的話(huà)ios7系統(tǒng)會(huì)出現(xiàn)留白*/
-webkit-overflow-scrolling:touch;/*流暢滾動(dòng),ios7下會(huì)有滑一下滑不動(dòng)的情況词疼，所以需要寫(xiě)上*/
position:realtive;/*直接子級(jí)如果是絕對(duì)定位有運(yùn)動(dòng)到屏幕外的話(huà)，會(huì)出現(xiàn)留白*/
}
