移动端开发兼容性总结

每次h5开发，总会遇到一些兼容性bug，现在总结下，供大家参考。

1)定位问题：ios
2)写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
3)防止手机中网页放大和缩小:<meta name="viewport" content="user-scalable=0" />
4)设置Web应用是否以全屏模式运行:<meta name="apple-mobile-web-app-capable" content="yes">,content的默认值是no

5)自动识别电话号码:<meta name="format-detection" ontent="telephone=no">,telephone=no可以禁用这功能,默认值是no

6)禁止复制、选中文本:

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
7) 设置缓存:
<meta http-equiv="Cache-Control" content="no-cache" />
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置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

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>


12)、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
  border: 0;
  -webkit-appearance: none;
}
13)、消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}

14)、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
1
this.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;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/

}



17)
viewport模板
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。
<meta content="yes" name="apple-mobile-web-app-capable">//这个也是iphone私有标签，允许全屏浏览。
<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私有标签，iphone顶端状态条的样式。
<meta content="telephone=no" name="format-detection">//禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。
<meta content="email=no" name="format-detection">