为什么Android边框上的CSS边框看起来有所不同？

Question

我有一个带边框的盒子.

border: 1px solid #000;

我正在使用以下视口设置:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

边框似乎是顶部和右侧的2个像素.这是什么原因？

附加:除了宽度和高度之外,没有其他CSS规则.

Answer 1

专门针对像素密度的元标记已被折旧,现在Android和iPhone似乎只使用了一个元标记:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是,如果您尝试制作1px边框,则根据移动设备的像素密度,它会在不同侧面变得更厚更薄.

一些设备如何使用多个像素渲染"1px"并且它并不总是很漂亮,因为它们使用不同的像素比率(dpr),例如1.5,2和3.有时,1px边框的所有4个边都不匹配.

这是一些CSS,通过将1px除以一半,在2dpr iPhone上正确显示1px:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

div {

border-width: 0.5px;

}