innerWidth和屏幕宽度显示相同的值？

Question

我在JavaScript中探索内置对象，并编写了以下内容以查看Chrome中的返回值。

console.log(window.innerWidth);
console.log(window.screen.width);

就我在阅读的书中所看到的，Mozilla对这些属性的文档，以及评论中链接的问题，innerWidth将显示视口本身的宽度值，而不是任何浏览器界面，屏幕宽度应该显示我的电脑的全屏宽度。

但是，无论我如何调整Chrome窗口的大小，它们都会在控制台中显示相同的innerWidth值。当我调整窗口大小时，屏幕宽度的值会发生变化（我认为这种行为仅限于innerWidth）而不是保持我认为或多或少的常数＆＃34;我的笔记本电脑的分辨率。

我觉得这很痛苦！是否有一个原因？我误解了这些属性吗？值？

Answer 1

将其粘贴到Chrome控制台中，您会看到他们在您调整浏览器大小时返回两个不同的值，一个是静态（您的屏幕宽度），另一个是动态（浏览器的宽度＆） ＃39; s viewport）。

window.addEventListener('resize', () => {
    console.log(window.screen.width, window.innerWidth)
})

我不确定您是如何获取错误值的，但这两个属性在Chrome中都能正常运行。