每次H5开发，总会遇到一些兼容性bug，现在总结下，供大家参考。
1)定位问题：ios
2)写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
3)防止手机中网页放大和缩小:
4)设置Web应用是否以全屏模式运行:,content的默认值是no
5)自动识别电话号码:,telephone=no可以禁用这功能,默认值是no
6)禁止复制、选中文本:
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
7) 设置缓存:
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
8) 苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
9) IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级
10)给不同屏幕大小的手机设置特殊样式:
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){ }
11)IOS中input键盘事件keyup、keydown、keypress支持不是很好,用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
方法：可以用html5的oninput事件去代替keyup
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
12)、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
13)、消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
14)、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
1this.value = this.value.replace(/\u2006/g, '');
15)、手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
.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+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}
16)、
html,body{
overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/
-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/
position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
}
网友评论