为什么浏览器中的像素大小与我的显示分辨率不匹配？

问题描述

我在MacBook上的分辨率为2560 x 1600 px，当我制作一个div且尺寸参数比分辨率小一半（即1280 x 800）时，我希望我的浏览器使用一半的屏幕面积，但是而是显示缩放的对象，我该如何解决？

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div style="height: 800px; width: 1280px; background-color: cyan;">
    </div>
  </body>

</html>

解决方法

这是由于设备像素比率：如果DPR为2（对于大多数视网膜显示器），则每个“ CSS像素”（即您在CSS中设置的像素设置）是2倍设备像素的宽度和高度一样高，从而可以更好地解析基于矢量的图形（包括字体）。因此，您必须将设备的实际结果值除以该数字，以获得相应的CSS像素值。

在媒体查询中，您也可以使用设备像素，但不能在常规CSS规则中使用。

此处有更多信息：https://hacks.mozilla.org/2013/09/css-length-explained/

请检查您的显示比例/缩放级别。提示：如果要相对于我们的屏幕尺寸缩放div，可以在CSS中使用vh和vw。 100vh是全角。

html macos pixel resolution screen-resolution

为什么浏览器中的像素大小与我的显示分辨率不匹配？

问题描述

解决方法

相关问答