JS об'єкт Screen

Введення в об'єкт Screen

Об'єкт Screen у JavaScript представляє інформацію про екран фізичного пристрою користувача. Він надає різні властивості, які дозволяють взаємодіяти та отримувати детальну інформацію про розміри екрану, доступне розширення та інше.

Властивості об'єкту Screen

screen.width і screen.height:

Ці дві властивості вказують абсолютний розмір екрану у пікселях.

console.log("Ширина екрану: " + screen.width);
console.log("Висота екрану: " + screen.height);

У цьому прикладі, якщо ваш екран має розмір 1920x1080, ви отримаєте вивід:

Ширина екрану: 1920
Висота екрану: 1080

screen.availWidth і screen.availHeight:

Ці властивості показують доступний розмір екрану у пікселях, вираховуючи, наприклад, панель завдань.

console.log("Доступна ширина екрану: " + screen.availWidth);
console.log("Доступна висота екрану: " + screen.availHeight);

screen.colorDepth і screen.pixelDepth:

Ці властивості представляють глибину кольору екрану у бітах на піксель.

console.log("Глибина кольору: " + screen.colorDepth);
console.log("Глибина пікселя: " + screen.pixelDepth);

правити

Рекомендації та особливості

Хоча об'єкт Screen надає інформацію про розмір та характеристики екрану, він не надає можливості змінювати ці характеристики чи взаємодіяти з екраном на глибокому рівні.

Використання у реактивному дизайні:

Відомості про розмір екрану можуть бути корисними для реактивного веб-дизайну. Наприклад, можна змінювати стиль веб-сторінки в залежності від розміру екрану користувача.

if(screen.width <= 480) {
    console.log("Мобільний режим");
    // Змінити стиль для мобільних пристроїв
} else {
    console.log("Десктопний режим");
    // Застосувати стиль для десктопних комп'ютерів
}

Надійність даних:

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

правити

Порада

Хоча може бути спокусливо робити припущення про тип пристрою на основі розміру його екрану (наприклад, що екран з шириною менше 500 пікселів належить мобільному телефону), це не завжди правда. Завжди проектуйте з думкою про різноманітність пристроїв та розмірів екранів.

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

Нотатка

Не плутайте реальний розмір екрану з доступним розміром. Властивості screen.width і screen.height показують повний розмір екрану, тоді як screen.availWidth і screen.availHeight відображають розмір, доступний для браузера, враховуючи такі елементи як панель завдань.

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

Нотатка

При розробці адаптивних веб-сайтів може здатися корисним знати розмір екрану користувача. Однак зазвичай для адаптивного дизайну краще використовувати CSS Media Queries, оскільки вони дозволяють більш гнучко реагувати на різні розміри вікон і пристроїв.

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

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

Синтаксис

let screenObj = window.screen;

властивості

Переглядачі

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

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

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

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

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

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

Переглядач
	0.10.0	1.0

Приклади

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

if(screen.width < 1024 || screen.height < 768) {
    alert("Для кращого відображення рекомендуємо використовувати розширення 1024x768 або більше.");
}

if(screen.colorDepth <= 16) {
    document.body.classList.add('low-color-depth');
}

if(screen.width <= 480) {
    document.body.classList.add('mobile-mode');
} else {
    document.body.classList.add('desktop-mode');
}