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

Question

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

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

据我从正在阅读的书、有关这些属性的 Mozilla 文档以及评论中链接的问题中看到，innerWidth 将显示视口(viewport)本身的宽度值，而无需任何浏览器界面和屏幕宽度应该显示我的计算机的全屏宽度。

但是，无论我如何调整 Chrome 窗口的大小，它们都会在控制台中显示相同的 innerWidth 值。当我调整窗口大小时，屏幕宽度的值会发生变化(我认为这是 innerWidth 独有的行为)，而不是保持我认为或多或少是笔记本电脑分辨率的“恒定”值。

我觉得这很明显!是否有一个原因？我是否误解了属性的值？

Answer 1

将此粘贴到 Chrome 的控制台中，您会看到它们在调整浏览器大小时返回两个不同的值，一个是静态的(您的屏幕宽度)，一个是动态的(浏览器视口(viewport)的宽度)。

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

我不确定你是如何得到错误的值的，但是这两个属性在 Chrome 中都能正常工作。