移动端开发通用-未认证

1. 阻止旋转屏幕时自动调整字体大小

* {
  -webkit-text-size-adjust: none;
}

2. 修改移动端难看的点击的高亮效果，iOS和安卓下都有效

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}   

3. iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

4. 禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

5. 禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none;

6. 禁止ios和android用户选中文字

-webkit-user-select: none;

7. calc的兼容处理

div { 
  width: 95%; 
  width: -webkit-calc(100% - 50px); 
  width: calc(100% - 50px); 
}

8. fixed定位缺陷
iOS下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位，android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 。iOS4下不支持position:fixed

解决方案： 可用iScroll插件解决这个问题

9. 一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

cursor: pointer;

10. 消除transition闪屏问题

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

11. 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);

12. iOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格
解决方法：通过正则去除

this.value = this.value.replace(/\u2006/g, '');

13. input的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决方案时是设置css

line-height: normal;