innerWidth и ширина экрана, показывающие одинаковые значения?

Question

Я исследую встроенные объекты в JavaScript и написал следующее, чтобы увидеть их возвращаемые значения в Chrome.

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

Насколько я вижу из книги, которую читаю, документы Mozilla об этих свойствах и вопрос, связанный в комментариях, innerWidth покажет значение ширины самого окна просмотра без какого-либо интерфейса браузера, а ширина экрана должна отображать полную ширину экрана моего компьютера.

Однако, независимо от того, как я изменяю размер окна Chrome, они показывают одинаковое значение innerWidth в консоли.Ширина экрана изменяется в значении, когда я изменяю размер окна (поведение, которое я считал исключительным для innerWidth) вместо того, чтобы оставаться в том, что, по моему мнению, было бы более или менее «постоянным» значением разрешения моего ноутбука.

Я чувствуюкак это до боли очевидно!Для этого есть причина?Я неправильно понял значения свойств?

Answer 1

Вставьте это в консоль Chrome, и вы увидите, что они возвращают два разных значения при изменении размера браузера: одно статическое (ширина экрана) и одно динамическое (ширина области просмотра браузера).

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

Я не уверен, что вы получаете неправильные значения, но оба эти свойства работают правильно в Chrome.