css.in.ua
Підтримати

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

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

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

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

Синтаксис

Screen.availHeight

Значення

Return

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

У цьому прикладі ми складніше використовуємо Screen.availHeight для адаптації веб-додатку під різні розміри екранів. Наприклад, можна змінити розмір або кількість елементів, відображених на сторінці, залежно від висоти екрану.

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

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

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

Спільнота

Зв'язок