css - 为什么我的网站宽度小于我的屏幕分辨率

Question

根据 Windows 中的显示设置，我笔记本电脑的屏幕分辨率是 1920 x 1080。当我打开浏览器并使用开发人员工具检查浏览器的宽度时，它会显示 1536 px。他们为什么不同？是不是提到了硬件像素和软件像素(CSS像素)的区别in this article :

When Apple pioneered this with their Retina display, they split the concept of pixels into hardware pixels and software pixels. A hardware pixel is an individual dot of light in the display. A software pixel, also called a CSS pixel in the web world, is a unit of measurement.

Answer 1

首先检查您的缩放比例是否为 100%。

设备像素比

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution. what exactly is device pixel ratio?

您可以使用:window.devicePixelRatio 获得此比率。

如果此比率大于 1，则您的可用屏幕尺寸将小于逻辑尺寸。这意味着您可以拥有 1920 x 1080 的逻辑分辨率，而您的硬件分辨率是 1536 x 864

示例

首先让我们使用 window.screen

检查可用的屏幕尺寸

现在，假设:

1. window.devicePixelRatio == 1.25
2. window.screen.availWidth == 1536

逻辑宽度为:

window.devicePixelRatio * window.screen.availWidth == 1920