移动端常见问题

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-width: 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;
posted @ 2018-01-12 22:59  CorderBob  阅读(150)  评论(0编辑  收藏  举报