移动端开发笔记

设备像素比等概念

名词

解释

补充

设备像素/物理像素

设备屏幕的物理像素，单位是 px，比如 iPhone6 是 750*1334px，也就是我们通常说的分辨率

表示屏幕上可以铺多少个点，并不是一个绝对长度单位，因为点的大小可能不一样

设备独立像素

也称为密度无关像素，也有人称为 css 像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如 css 像素），然后由相关系统转换为物理像素。比如 iPhone6 的设备独立像素是 375*667px，也就是说用 css 去表示 iPhone6 的宽高分别是 375px 和 667px

也可以抽象理解为是设备宽高，即 screen.width/screen.height

设备像素比（dpr）

设备像素比 = 物理像素 / 设备独立像素。可以通过 window.devicePixelRatio 获取（缩放屏幕，该值会改变）； 在 css 中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同 dpr 的设备，做一些样式适配 (这里只针对 webkit 内核的浏览器和 webview)。

相对来说，dpr 越大，图像越清晰。比如 iPhone6 的 dpr 是 2，即用两个物理像素显示一个设备像素（这里像素都是指单个方向的，如果是二维方向，即用四个物理像素显示一个设备像素）。在移动端的时候可以根据 dpr 的值，使用不同分辨率的图片，如 2X 还是 3X，这样可以保证与在普通屏幕上看到的图片效果一致，不至于失真

PPI

表示每英寸的像素数量，即像素密度（iOS 中可能叫 dpi）， 正常人眼可以识别的分辨率为 300PPI

PPI 越大， 每英寸像素点越多，图像越清晰

retina 屏幕 1px 问题

在某些高清屏幕 (retina 屏) 下，1px 的边框往往看起来不像是 1px，因为它本可以 ‘更细’，

上图中，对于一条 1px 宽的直线，它们在屏幕上的物理尺寸 (灰色区域) 的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5 它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用 css 来表示，理论上说是 0.5px。

所以，设计师想要的 retina 下 border: 1px;，其实就是 1 物理像素宽，对于 css 而言，可以认为是 border: 0.5px;，这是 retina 下 (dpr=2) 下能显示的最小单位

然而，无奈并不是所有手机浏览器都能识别 border: 0.5px;，ios7 以下，android 等其他系统里，0.5px 会被当成为 0px 处理，那么如何实现这 0.5px 呢？

scale：

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

rem = document.documentElement.clientWidth * dpr / 10

乘以 dpr，是因为页面有可能为了实现 1px border 页面会缩放 (scale) 1/dpr 倍 (如果没有，dpr=1),。