1个物理像素的边框宽度

Question

有一项任务，使块的边界宽度为1个物理像素，而不管设备像素比如何。

项目使用

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

正因为如此，不同器件上的border: 1px solid black;根据像素比具有不同的边界宽度。我需要避免它，并使边界宽度为1个物理像素。

Answer 1

在纯CSS中近似这一点的一种方法是使用基于分辨率的媒体查询。

div {
  margin:.5em 0;
  border:1px solid red;
}
@media (min-resolution: 2dppx) {
  div.devicedot {border-width:.5px;}
}
@media (min-resolution: 3dppx) {
  div.devicedot {border-width:.34px;}
}
@media (min-resolution: 4dppx) {
  div.devicedot {border-width:.25px;}
}
@media (min-resolution: 6dppx) {
  div.devicedot {border-width:.17px;}
}

<div class="normal">This is normal</div>
<div class="devicedot">This is with a device dot</div>

当然，实际的查询取决于您的需求：如果您想在1200dpi的打印机上打印，则必须包含12dppx的查询。（如果你真的可以使用0.02毫米宽的线，那就是。）

请注意，假设浏览器完全支持@media，则此示例已简化。如果您在任何人都可以访问的实际网站上使用此功能，请包括@media all and ... 等保护措施