简体繁体 English

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

[英]Why is window.innerWidth smaller than screen.width even in full screen?

原文 2022-07-27 02:05:46 8 1 javascript/ css/ fullscreen/ screen-resolution/ browser-width

When my browser window is in full screen mode, the inner width of the window still seems to be smaller than my screen width.当我的浏览器 window 处于全屏模式时，window 的内部宽度似乎仍然小于我的屏幕宽度。 I am confused because (based on this thread ) I thought that, if my inner window took up my entire screen, then it would have the same dimensions as my screen.我很困惑，因为（基于此线程）我认为，如果我的内部 window 占据了我的整个屏幕，那么它将与我的屏幕具有相同的尺寸。

Instead, I receive the following values when I run window.innerWidth and screen.width in full screen mode:相反，当我在全屏模式下运行 window.innerWidth 和 screen.width 时，我收到以下值：

Screen width: 1280 px屏幕宽度： 1280 像素

Inner window width: 625 px内 window 宽度： 625 px

My browser is zoomed to 100%.我的浏览器放大到 100%。

Why doesn't the inner window width match the screen width when I put my browser in full screen mode?为什么当我将浏览器置于全屏模式时，内部 window 宽度与屏幕宽度不匹配？

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 . 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 .

Zooming in can happen both in the operating system and in the browser.放大可以在操作系统和浏览器中发生。 If the viewport window covers the entire screen and window.innerWidth and screen.width do not match, it's most likely the OS that is zoomed in.如果视口 window 覆盖整个屏幕并且window.innerWidth和screen.width不匹配，则很可能是放大的操作系统。

To fix this, just set the OS's zoom to 100%.要解决此问题，只需将操作系统的缩放设置为 100%。 This can be done in Windows by going to display settings and setting scale to 100%.这可以在 Windows 中通过显示设置并将比例设置为 100% 来完成。