javascript - HTML & CSS : fixed pixel height seems to be rendered differently in diffent screens/devices

Question

我已经为一个 div 设置了一个固定的高度，比方说:

div.box {
   height: 250px;
}

使用测量屏幕像素的工具 (Meazure)，我注意到在我的台式电脑上，它有一个 1680x1050 像素分辨率的显示器，盒子的像素是 250px(正确的值)；然而，在我的笔记本电脑上，它有一个 1920x1280 分辨率的显示器，使用 Meazure 测量的像素是不同的!它显示 539 像素...

以像素为单位的偏移值也会发生同样的事情...我注意到不同屏幕和设备之间的行为不同(在我的智能手机上这种效果更加放大...)

如何设置对每个设备都显示相同的“固定”值？

(注意:我不想使用 100% 作为宽度，因为我希望即使在调整窗口大小后框也具有固定值)。

Answer 1

How can I set a "fixed" value which will appear the same for every device?

不过，事情就是这样:“固定”像素值不会在每个设备上都显示相同，因为高密度屏幕是存在的。

在 72ppi 屏幕上看起来不错的 250px 框在高密度 300ppi 屏幕上会有点小(具体来说，它是预期大小的 24%。)浏览器使用设备像素比率来补偿这一点，以调整指定像素值到 appropriate size for that screen on that device . (您的 'meazure' 工具似乎没有考虑这个像素比，这似乎限制了它的实用性，因为它只会在传统的低密度屏幕上给出准确的结果。)

理论上，您可以通过将元素的大小乘以当前 devicePixelRatio 的倒数来取消此操作，但结果将与您想要的相反:元素将具有相同的数字的物理像素，但看起来在每个设备上的尺寸完全不同。

在实践中，完全忽略这种情况并相信浏览器会正确调整您指定的尺寸是最安全的。 (使用密度感知工具或浏览器自己的开发人员工具进行测量。)您真正需要考虑这一点的唯一情况是，如果您包含用于更高密度屏幕的高分辨率位图图像；在这些情况下，您将使用@media 查询来确定浏览器应使用哪个图像，例如

@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) { 
    /* 2x-res images here */
}
/* low-res images here */

(-webkit 前缀值当然是特定于 vendor 的；resolution 是尚未普遍支持的 standard。)