我已经为 div 设置了固定高度，比方说:
div.box {
height: 250px;
}
使用测量屏幕像素的工具(Meazure)，我注意到在我的台式电脑上，其显示器分辨率为1680x1050像素，方框的像素为250px(正确的值)；然而，在我的笔记本电脑(具有 1920x1280 分辨率显示屏)中，使用 Meazure 测量的像素是不同的!它显示 539 像素...
对于以像素为单位给出的偏移值，也会发生同样的情况...我注意到不同屏幕和设备之间的不同行为(在我的智能手机上，这种效果更加放大...)
如何设置一个“固定”值，该值在每个设备上都显示相同？
(注意:我不想使用 100% 的宽度，因为我希望即使在调整窗口大小后框也具有固定值)。
最佳答案
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 的；分辨率 是尚未普遍支持的 standard 。)
关于javascript - HTML 和 CSS : fixed pixel height seems to be rendered differently in diffent screens/devices，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47016180/