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 може використовуватися для визначення висоти, яка доступна для вмісту без потреби у прокрутці. Це забезпечує можливість створення інтерфейсу, який ефективно використовує доступний екранний простір, покращуючи загальну узгодженість та доступність веб-сайту.

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

Порада

Обережно використовуйте screen.availHeight у скриптах, які реагують на зміну розміру вікна, оскільки розміри екрану можуть змінюватися при зміні орієнтації пристрою або при докуванні на десктопі. Краще використовувати події зміни розміру (resize event) для динамічної адаптації вмісту.

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

Порада

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

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

Нотатка

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

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

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

Синтаксис

Screen.availHeight

Переглядачі

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

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

Переглядач
	1	1	1	12.1	12

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

Переглядач
	4.4	18	4	1

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

Переглядач
	-	-

Приклади

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

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

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