InnerWidth и ширина экрана показывают одинаковые значения?
Я изучаю встроенные объекты в JavaScript и написал следующее, чтобы увидеть их возвращаемые значения в Chrome.
console.info(window.innerWidth);
console.info(window.screen.width);
Насколько я понял из книги, которую я читаю, документации Mozilla по этим свойствам и вопроса, указанного в комментариях, innerWidth покажет значение ширины самого окна просмотра без какого-либо интерфейса браузера, а экран width должен отображать всю ширину экрана моего компьютера.
Однако независимо от того, как я изменяю размер окна Chrome, в консоли отображается одно и то же значение innerWidth. Ширина экрана изменяется в значении, когда я изменяю размер окна (поведение, которое я считал эксклюзивным для innerWidth) вместо того, чтобы оставаться тем, что, как я думал, будет более или менее «постоянным» значением разрешения моего ноутбука.
Мне кажется, это до боли очевидно! Есть причина для этого? Я неправильно понял значения свойств?
На самом деле я проверил именно этот вопрос! Это подтвердило поведение, которое, как я думал, должно происходить, но не происходит.
Я оставил ответ с фрагментом для тестирования в консоли. Как именно вы возвращаете эти значения при тестировании?
Скрипт связан в файле HTML, и я открываю его локально в Chrome и проверяю там консоль. Связаны только эти две строки JS, а HTML является скудным. Начинаю задумываться, где возникает эта проблема.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вставьте это в консоль Chrome, и вы увидите, что при изменении размера браузера они возвращают два разных значения: одно статическое (ширина экрана) и одно динамическое (ширина области просмотра браузера).
window.addEventListener('resize', () => {
console.info(window.screen.width, window.innerWidth)
})
Я не уверен, почему вы получаете неправильные значения, но оба этих свойства правильно работают в Chrome.
Спасибо, прогнал в программе. Внутренняя ширина составляет около 980 пикселей, пока я не изменю размер области просмотра за пределы 1000 пикселей, где в этот момент он меняет пиксель на пиксель для изменения размера вместе с шириной экрана. Ширина экрана меняется пиксель на пиксель во время всего изменения размера. Теперь они чувствуют обратное поведение.
Что произойдет, если вы измените размер области отображения в этой скрипке? jsfiddle.net/gprdtoeg
Все происходит именно так, как я думал! Изменяется только innerWidth, а ширина экрана держится на разрешении моего экрана 1440.
Хорошая новость в том, что он работает так, как задумано, поэтому ваша книга и MDN не лгут вам. Похоже, что с вашей местной средой что-то не так, но я не уверен, с чего бы вам начать помогать в этом.
Ага! Да, я тестировал в Safari, и он работает без проблем. Здесь показаны правильные значения для двух. Я вернулся в Chrome, чтобы проверить, не возвращает ли домашняя страница Google «неправильные» значения, и это так. Это не только мой файл в Chrome. Как странно.
Я думаю, что нашел проблему. Я отобразил два значения в HTML вместо того, чтобы записывать их в консоль, и они вернули правильные значения. Но как только я открываю инспектор и обновляю страницу, значения снова неверны. Кажется, отображается сам инспектор Chrome, который вызывает эту проблему.
Рад, что ты разобрался!
Возможный дубликат В чем разница между window.innerWidth и screen.width?