常见移动端兼容性问题

1、移动端开发需要加入的代码

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" content="initial-scale=1,  user-scalable=no",maximum-scale=1, minimum-scale=1>

2、

IOS端

1、input标签，设置type=button属性，disabled设置true，会出现样式文字和背景异常问题

解决方案：使用opacity=1

2、有时对非可点击元素如(label,span）添加单机监听事件，不会触发

解决方案：修改样式，cursor:pointer

3、使用webview时，页面滚动卡顿

解决方案：对webview设置更低的“减速率”

self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;

4.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />

5.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />

6.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none

7.消除 transition 闪屏
-webkit-transform-style: preserve-3d; /设置内嵌的元素在 3D 空间如何呈现：保留 3D/
-webkit-backface-visibility: hidden; /(设置进行转换的元素的背面在面对用户时是否可见：隐藏)/

8.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');

9.禁止ios和android用户选中文字
-webkit-user-select:none

10.CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位

2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

11.fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题