移动端常见问题

1、上下拉动滚动条时卡顿、慢

body {
       -webkit-overflow-scrolling: touch;
       overflow-scrolling: touch;
}

2、禁止复制、选中文本

Element {
       -webkit-user-select: none;
       -moz-user-select: none;
       -khtml-user-select: none;
         user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)

3、长时间按住页面出现闪退

element {
       -webkit-touch-callout: none;
}

4、iphone及ipad下输入框默认内阴影

Element{
-webkit-appearance: none;
}

5、ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

后面一篇文章有详细介绍，地址：http://www.haorooms.com/post/phone_web_ysk

6、active兼容处理

<body ontouchstart="">

7、动画定义3D启用硬件加速

Element {
       -webkit-transform:translate3d(0, 0, 0)
       transform: translate3d(0, 0, 0);
}
注意：3D变形会消耗更多的内存与功耗

8、Retina屏的1px边框

Element{
       border- thin;
}

9、旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
       -webkit-text-size-adjust:100%;
}

10、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /

-webkit-backface-visibility:hidden;

11、圆角bug

某些Android手机圆角失效

background-clip: padding-box;