为什么 window.innerWidth 比 screen.width 小，即使是全屏？

Question

当我的浏览器 window 处于全屏模式时，window 的内部宽度似乎仍然小于我的屏幕宽度。 我很困惑，因为（基于此线程）我认为，如果我的内部 window 占据了我的整个屏幕，那么它将与我的屏幕具有相同的尺寸。

相反，当我在全屏模式下运行 window.innerWidth 和 screen.width 时，我收到以下值：

屏幕宽度： 1280 像素

内 window 宽度： 625 px

我的浏览器放大到 100%。

为什么当我将浏览器置于全屏模式时，内部 window 宽度与屏幕宽度不匹配？

Answer 1

As window.innerWidth and window.innerHeight return the dimensions of the viewport window instead of the display monitor, zooming into a webpage will decrease the values of both window.innerWidth and window.innerHeight .

放大可以在操作系统和浏览器中发生。 如果视口 window 覆盖整个屏幕并且window.innerWidth和screen.width不匹配，则很可能是放大的操作系统。

要解决此问题，只需将操作系统的缩放设置为 100%。 这可以在 Windows 中通过显示设置并将比例设置为 100% 来完成。