android - 高分辨率显示器上的小数 CSS 像素大小

Question

(我已经看过了；我不认为这是重复的:Are the decimal places in a CSS width respected?)

我设置一个对象的大小如下:

.foo {
  height: 10.5px;
  width: 10.5px;
}

通常，向下舍入；你不能使用半个像素。

也就是说，最新的 Nexus 7 具有 320dpi，而 Android 设备上的 CSS 像素定义为 160dpi。在 Nexus 7 上使用 400 像素而不是 100 像素绘制 10px x 10px 图像。

那么在高像素密度设备上 - 那些 window.devicePixelRatio > 1.0 - 小数像素是有用的，还是只是被丢弃了？

(谢谢!)

编辑，举一个真实世界的例子。

我有一台 MacBook Retina。我有一个 21x21 像素的图像文件。我希望它不以任何方式重新缩放而显示在我的视网膜上；我希望文件中的每个像素对应于屏幕上的一个像素。 CSS 像素不链接到硬件像素，CSS 中的 1 像素对应于 Retina 显示器或 Nexus 7/10 上的 4 像素(2 宽，2 高)。

我希望能够指定图像的确切大小，这样它就不会重新缩放，并且在加载图像后页面不会重排。为此，我可以将图像放入设置为 11x11 的 div，并将图像显示为 100%，但这是添加了一个额外的 div，而且我对页面大小有点强制症。

Answer 1

它们被丢弃了。

我想我明白了你想用小数像素实现的目标，但实际上你需要走的路是为更高密度的显示器使用更高分辨率的图像。这应该可以满足您的要求，不是吗？

我想不出您需要小数像素或类似像素的任何理由。

也就是说，小数像素不起作用，但小数百分比起作用。

.foo {
    height: 10.5%;
    width: 10.5%;
}

这将起作用并且应该做任何你需要小数像素的事情(你需要从示例中明显地更改百分比)。