您的位置：首页 > 移动开发

关于移动端样式处理

2017-08-02 14:12 267 查看
上下拉动滚动条时卡顿、慢

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启用硬件加速(注意：3D变形会消耗更多的内存与功耗)

Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}


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;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航