移动端开发兼容性总结

每次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">