移动端兼容性问题

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

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;/直接子级如果是绝对定位有运动到屏幕外的话，会出现留白/

}

viewport模板

//主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。 //这个也是iphone私有标签，允许全屏浏览。 //iphone的私有标签，iphone顶端状态条的样式。 //禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。