JS властивість Screen.availHeight

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

Властивість Screen.availHeight забезпечує інформацію про висоту доступної області екрану в пікселях, що виключає будь-які інтерфейсні елементи, як-от панель завдань операційної системи, зайняті вікнами браузера або іншими панелями. Ця властивість є частиною об'єкта Screen, який доступний в глобальному контексті window веб-додатків, розроблених на JavaScript. Використання Screen.availHeight дає розробникам можливість точно розуміти реальну висоту, доступну для відображення контенту або інтерфейсу користувача, що особливо важливо для створення адаптивного дизайну та оптимізації веб-додатків під різноманітні пристрої та роздільні здатності.

Screen.availHeight має особливе значення при розробці веб-сайтів та додатків, які повинні ефективно використовувати доступний простір екрану. Це дозволяє динамічно адаптувати макети, змінювати розміри та розташування елементів у відповідності до розмірів екрану користувача, що є критично важливим для забезпечення високої якості користувацького досвіду на різноманітних пристроях, від мобільних телефонів до великих моніторів.

Приклади використання

1. Адаптація веб-сторінки під розмір екрану:

   Веб-розробники можуть використовувати Screen.availHeight для адаптації розмірів елементів сторінки або для вибору між різними макетами на основі висоти доступної області екрану.

   if (window.screen.availHeight > 800) {
       // Логіка для великих екранів
       document.body.classList.add('large-screen');
   } else {
       // Логіка для менших екранів
       document.body.classList.add('small-screen');
   }
   

2. Оптимізація відображення модальних вікон:

   При розробці інтерфейсів з модальними вікнами або випливаючими елементами, Screen.availHeight може допомогти визначити оптимальний розмір цих елементів, щоб вони не перевищували висоту відображення і не потребували прокрутки.

   const modal = document.getElementById('myModal');
   const maxHeight = window.screen.availHeight * 0.8; // 80% від доступної висоти
   modal.style.maxHeight = `${maxHeight}px`;
   

3. Реагування на зміну розміру екрану:

   Хоча Screen.availHeight є статичною властивістю і не змінюється при ресайзі вікна браузера, вона може бути корисною для початкової настройки інтерфейсу. Для реагування на зміни розмірів у реальному часі краще використовувати події resize об'єкта window.

При використанні Screen.availHeight важливо враховувати, що ця властивість відображає лише вертикальний простір, який доступний для веб-додатків, і не враховує можливі обмеження, пов'язані з відкритими вкладками, панелями інструментів або адресною стрічкою браузера. Тому, плануючи дизайн та функціонал веб-сторінки, розробники повинні застосовувати комплексний підхід, використовуючи Screen.availHeight у поєднанні з іншими методами і властивостями для точного визначення розмірів і можливостей відображення контенту.

Загалом, Screen.availHeight є цінним інструментом для розробників, що дозволяє покращити адаптивність та доступність веб-сайтів, забезпечуючи користувачам комфортний досвід перегляду незалежно від їхнього пристрою або роздільної здатності екрану.

Синтаксис

Screen.availHeight

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

if (screen.availHeight > 800) {
    // Логіка для великих екранів
    document.body.style.fontSize = "18px";
} else {
    // Логіка для менших екранів
    document.body.style.fontSize = "16px";
}

// Виведення доступної висоти екрану
console.log("Доступна висота екрану:", screen.availHeight, "пікселів");