移动端的 1px

问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。


产生原因:首先先要了解一个概念:DPR(devicePixelRatio) 设备像素比,它是默认缩放为 100%的情况下,设备像素和 CSS 逻辑像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS中设置的px是逻辑像素,这就造成1px变成物理像素的2px或者3px,比如2 倍屏,设备的物理像素要实现 1 像素,所以 CSS 逻辑像素只能是 0.5px。


下面介绍最常用的方法:


通过​CSS :before 选择器​​CSS :after 选择器​设置​height:1px​,同时缩放0.5倍实现。


/* 底边框 */
.b-border {
position: relative;
}
.b-border:before {
content: ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #d9d9d9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}


CSS动画页面闪白,动画卡顿


问题描述: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);


禁止保存或拷贝图像


不想让其他人盗用图片,可以有如下写法:



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


iOS 滑动不流畅


ios 手机上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。 iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。

  • 解决方式1.在滚动容器上增加滚动 touch 方法


.wrapper {
-webkit-overflow-scrolling: touch;
}


  • 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动,超出的部分 body 隐藏。

body {
overflow-y: hidden;
}
.wrapper {
overflow-y: auto;
}