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

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

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

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

if (screen.height > 1080) {
    // Застосування стилів для великих екранів
    document.body.style.fontSize = "18px";
} else {
    // Стилі для менших екранів
    document.body.style.fontSize = "16px";
}

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

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

let content = document.getElementById('main-content');
if (screen.height < 800) {
    content.style.layout = "

compact";
    // Застосування компактного макету
} else {
    content.style.layout = "expanded";
    // Розширений макет для більших екранів
}

Цей фрагмент коду ілюструє, як можна змінити макет сторінки, використовуючи Screen.height для визначення оптимального розміру та розташування елементів у залежності від розміру екрану.

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

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

Порада:	Для створення інтерактивних веб-додатків, що вимагають специфічного розміщення елементів на великих екранах, використовуйте `screen.height` як частину умови при розробці. Це може допомогти в реалізації спеціальних функцій або візуальних ефектів для користувачів з великими моніторами, покращуючи їх взаємодію з вашим сайтом.
Порада:	Ураховуйте значення `screen.height` при тестуванні веб-додатків на сумісність з мобільними пристроями. Визначення висоти екрану дозволить адекватно адаптувати візуальний контент і інтерфейс користувача, забезпечуючи зручне відображення на пристроях з різноманітними розмірами екранів, особливо на портативних пристроях.
Порада:	Використовуйте `screen.height` для реалізації функціоналу "повноекранного режиму" у ваших веб-додатках або іграх. Знання точної висоти екрану користувача допоможе правильно налаштувати відображення контенту, максимально використовуючи доступний простір екрану для іммерсивного користувацького досвіду.

Синтаксис

Screen.height

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/GReGRrj">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

// Отримання висоти екрану користувача
var screenHeight = screen.height;

// Виведення висоти екрану в консоль
console.log('Висота вашого екрану: ' + screenHeight + ' пікселів.');

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

<!DOCTYPE html>
<html>
<head>
    <title>Адаптація під висоту екрану</title>
    <style>
        .dynamic-content {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            /* Висота блоку буде встановлена динамічно */
        }
    </style>
</head>
<body>

<div id="dynamicContent" class="dynamic-content">
    Вміст адаптується під висоту вашого екрану.
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var screenHeight = screen.height;
        var dynamicContent = document.getElementById('dynamicContent');
        
        // Встановлення висоти блоку до 75% від висоти екрану
        dynamicContent.style.height = (screenHeight * 0.75) + 'px';
        
        // Додавання інформації про розмір
        dynamicContent.innerHTML += '<p>Висота цього блоку складає 75% від висоти вашого екрану.</p>';
    });
</script>

</body>
</html>

JS довідник

JavaScript

Наповнення JS розділу