物理像素

设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。

逻辑像素

逻辑像素也叫“设备独立像素”（Device Independent Pixel, DIP）。

可以理解为CSS像素，JS中的像素，他是viewport中的一个小方格。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

像素比

像素比（Device Pixel Ratio, DPR）一个设备的物理像素与逻辑像素之比。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

通过控制台screen.width和screen.height可以获得逻辑像素。根据设备的实际像素参数可以获得物理像素。

他们的比值就是像素比。也可以在控制台通过 window.devicePixelRatio 来获得。

1px问题

实现真正的1物理像素

更改 initial-scale

当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。

使用0.5px

并不是所有浏览器都能识别0.5px，只在Firefox和Safari 8+支持，安卓不支持。有的系统里0.5px会被当作0px来处理。

用媒体查询根据设备像素比用“伪元素+transform”对边框进行缩放。

对于2倍屏 transform:scale(0.5)

对于三倍屏 transform:scale(0.33)

可以使用CSS的-webkit-min-device-pixel-ratio媒体查询针对不同的DPR作出处理。下面以Less代码为例：

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-bt-1px{
        position: relative;
        :after{
            position: absolute;
　　　　　　　left:0;           
 　　　　　　 bottom: 0;
            width: 100%;
            height: 1px;
            background: #ee2c2c;
            transform: scaleY(0.5);
        }
    }
}

缩放保持在原始或者某个方向上，可以使用 transform-origin 属性, 这个可以控制缩放依赖的位置。

拓展

前端解决小于12px字体

参考

viewport

Mark24

物理像素与逻辑像素和1px问题