关于移动端样式处理

最新推荐文章于 2020-03-22 10:16:32 发布

maizi19900512

最新推荐文章于 2020-03-22 10:16:32 发布

阅读量349

点赞数

分类专栏：移动端文章标签：移动

本文链接：https://blog.csdn.net/maizi19900512/article/details/76576661

版权

1 篇文章 0 订阅

订阅专栏

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;

关注

专栏目录