如何在具有设备像素比率的屏幕上使用硬件/物理像素单元> 1

Question

我有一个屏幕测试应用程序，应该向人们展示屏幕上的单个硬件像素的外观，并将其与逻辑像素进行比较。

我们的想法是让人们体验不同像素比率的屏幕如何将硬件像素映射到逻辑像素。

document.getElementById('devicePixelRatio').innerText = window.devicePixelRatio;
document.getElementById('screen.width').innerText = window.screen.width;
document.getElementById('screen.height').innerText = window.screen.height;

#logical-pixel {  
  width:1px;
  height:1px;
  left:15px;
  top: 15px;
  position: relative;
  background:black;
  overflow:hidden;
}

#hardware-pixel {
  width:1px;
  height:1px;
  left:15px;
  top: 15px;
  position: relative;
  background:black;
  overflow:hidden;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  #hardware-pixel {
    width:0.5px;
    height:0.5px;
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  #hardware-pixel {
    width:0.6666px;
    height:0.6666px;
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  #hardware-pixel {
    width:0.3333px;
    height:0.3333px;
  }
}

.pixel-wrapper {
  border-radius: 50%; 
  border: 1px solid red;
  width: 30px; 
  height: 30px;
}

<meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" />
<div class="pixel-wrapper">
  <div id="logical-pixel"></div>
</div>
<div class="pixel-wrapper">
  <div id="hardware-pixel"></div>
</div>
<dl>
  <dt>devicePixelRatio</dt>
  <dd id="devicePixelRatio">...</dd>
  <dt>screen.width</dt>
  <dd id="screen.width">...</dd>
  <dt>screen.height</dt>
  <dd id="screen.height">...</dd>
</dl>

但是你可以看到代码有两个问题：

1. 所有媒体查询都很难看。它们实际上可以是更多比率：http://bjango.com/articles/min-device-pixel-ratio/
2. 硬件像素和逻辑像素的大小似乎相同！如果你真的疯狂放大，差异会出现但仍然存在！浏览器是否以某种方式将这些像素值四舍五入？！以下是像素比为2的屏幕上的上述代码的输出。

在100％缩放时，硬件像素的大小与逻辑像素的大小相同：



15％的硬件像素神秘地消失了：



在200％时你可以注意到硬件像素和逻辑像素之间的区别：



这是一个500％的缩放参考：



如何在没有太多Javascript代码的情况下在这样的屏幕中显示一个硬件像素，或者为每个可能的设备像素比率编写一个CSS规则，或者使用<meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" />（ref）转换整个页面？< / p>