0.5px

【亲测】

ios，android均出现0.5“px”的线

/* html */
<html>
    <head>
        <meta name="viewport" initial-scale=0.5 />
    </head>
</html>

/* css */
.test {
    border: 1px solid red;
}

ios出现0.5“px”的线，android即使dpi >= 2，不显示线（0.5px会被认为是0px）

安卓图：

/* css */
.test {
    border: 1px solid red;
}

因此，只是在js中判断window.devicePixelRatio && devicePixelRatio >= 2而给元素加0.5px的线并不准确。

dpi: dots per inch

retina屏幕且系统是ios8以上，dpi == 2 意味 1个CSS像素 == 2个物理像素，会用2个物理像素表示1个CSS像素，因此肉眼看到的是1px是用2个像素点画出来的。当我们指定0.5px时，只用一个像素点来画，自然“细了”。

但是对于安卓手机，虽然dpi达到了2，却【好像】没有这种处理机制，不支持0.5px，在解析时，会认为0.5px == 0px。因此，什么都没有了。

dpi

results matching ""