以前做pc端，也會(huì)遇到兼容性的問題，不過說實(shí)話，腦海里全是ie的問題，并沒有什么可特別注意的，可能是我不善總結(jié)，現(xiàn)在做移動(dòng)端（本來覺得移動(dòng)端很easy，所以沒放在眼里），so，我錯(cuò)了，我為自己的輕視高傲買單！
最近就遇見了一些兼容性bug，從網(wǎng)上找了資料。
先說一下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í)別為電話號碼，這個(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è)叉號: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");
};
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
