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

Question

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

  

当苹果公司在其Retina显示屏上率先采用这种技术时，他们将   像素的概念分为硬件像素和软件像素。硬件   像素是显示器中的单个光点。一个软件像素，   在网络世界中也称为CSS像素，是一种测量单位。

Answer 1

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

设备像素比率

  

设备像素比率是物理像素与像素之间的比率   逻辑像素。例如，iPhone 4和iPhone 4S报告了   设备像素比例为2，因为物理线性分辨率为   将逻辑线性分辨率提高一倍。   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