JavaScript innerHeight — висота області перегляду

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

правити

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

Найбільший біль тут — мобільні браузери. Адресний рядок на них то ховається при прокрутці, то з'являється, і висота вікна змінюється на льоту. Через це 100vh у CSS роками давав блок, вищий за екран, і низ інтерфейсу зникав під адресним рядком.

Історично це лікували, записуючи innerHeight у CSS-змінну. Сьогодні є нормальне рішення — одиниця dvh (динамічна висота вікна), і милиця більше не потрібна.

правити

Порада

Пишеш повноекранний блок — бери height: 100dvh, а не 100vh. На мобільних це рятує від зникнення низу під адресним рядком.

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

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

Переглядачі

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

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

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

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

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

Приклади

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

console.log(window.innerHeight);

// історична милиця (більше не потрібна):
// document.documentElement.style.setProperty(
//     '--vh', window.innerHeight * 0.01 + 'px'
// );

// сьогодні достатньо CSS:
// .fullscreen { height: 100dvh; }