JavaScript innerWidth — ширина області перегляду

Властивість innerWidth повертає ширину видимої області вікна в пікселях.

правити

Загальний опис

Тут є пастка, через яку JavaScript і CSS починають сперечатись. innerWidth враховує смугу прокрутки, а медіазапит CSS — ні. На десктопі різниця — 15–17 пікселів, і рівно на межі макета вони дадуть різні відповіді: CSS уже вважає екран вузьким, а JavaScript ще ні.

Тому для рішень «мобільний чи ні» бери matchMedia() — він питає той самий движок, що застосовує CSS.

Без смуги прокрутки ширину дає document.documentElement.clientWidth.

правити

Нотатка

Читання innerWidth у обробнику resize спрацьовує десятки разів на секунду. Без обмеження частоти (throttle) це помітно гальмує сторінку.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
innerWidth	1+	1+	1+	3+	12+	5+

Підтримка: мобільні переглядачі

Переглядач
innerWidth	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

console.log(window.innerWidth);  // зі смугою прокрутки
console.log(document.documentElement.clientWidth); // без неї

// узгоджено з CSS — беремо це
const mobile = window.matchMedia('(max-width: 767px)');
console.log(mobile.matches);

// а не це: на межі розійдеться з CSS на 15px
// if (window.innerWidth < 768) {}