Question

我为div设置了一个固定的高度，让我们说：

div.box {
   height: 250px;
}

使用测量屏幕像素的工具（Meazure），我注意到在我的台式电脑上，其显示器的分辨率为1680x1050像素，盒子的像素为250px（正确值） ;但是，在我的笔记本电脑中，它具有1920x1280分辨率的显示屏，使用Meazure测量的像素是不同的！它显示539像素......

同样的事情发生在以像素给出的偏移值...我注意到不同的屏幕和设备之间的不同行为（在我的智能手机上，这种效果更加放大......）

如何设置＆＃34;固定＆＃34;每个设备看起来都相同的值？

（注意：我不想使用100％的宽度，因为我希望即使在调整窗口大小后盒子也有固定值。）

Answer 1

如何设置＆＃34;固定＆＃34;每个设备看起来都相同的值？

但事情是这样的：a＆＃34;固定＆＃34;像素值不会在每个设备上显示相同，因为高密度屏幕是存在的东西。

在72ppi屏幕上看起来很好的250px盒子在高密度300ppi屏幕上看起来很不错（特别是它的预期尺寸的24％）。浏览器使用设备像素比来补偿这一点。将指定的像素值调整为appropriate size for that screen on that device。（你的＆＃39; meazure＆＃39;工具似乎没有考虑到这个像素比率，这似乎相当于限制了它的实用性，因为它只会在传统的低密度屏幕上给出准确的结果。）

理论上你可以通过将元素的大小乘以当前devicePixelRatio的倒数来撤消这个，但结果将与你想要的相反：元素具有相同数量的物理像素，但在每台设备上看完全不同的尺寸。

在实践中，最好忽略这种情况发生，并相信浏览器可以正确调整指定的大小。（使用密度感知工具或浏览器自己的开发人员工具进行测量。）您真正需要考虑这一点的唯一情况是，您是否包含用于更高密度屏幕的高分辨率位图图像;在这些情况下，您使用@media查询来确定浏览器应使用哪个图像，例如

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

（-webkit前缀值当然是供应商特定的; resolution是尚未普遍支持的standard。）

Answer 2

我首先建议首先检查实际的CSS属性。右键 - ＆gt;检查元素并查看您的PC和笔记本电脑div.box高度是否实际设置为250px

可能由于分辨率不同，正在应用不同的样式。如果你有www。要查看的页面，在评论中发布

HTML＆amp; CSS：固定像素高度似乎在不同的屏幕/设备中呈现不同

2 个答案: