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 може відображати точні дані про реальний розмір екрану, особливо коли користувач змінює масштаб вікна браузера або використовує спеціальні налаштування дисплея. Тому завжди рекомендується проводити тести на різних пристроях та розмірах екрану.
| Нотатка: | При розробці адаптивних веб-сайтів може здатися корисним знати розмір екрану користувача. Однак зазвичай для адаптивного дизайну краще використовувати CSS Media Queries, оскільки вони дозволяють більш гнучко реагувати на різні розміри вікон і пристроїв. |
| Порада: | Хоча може бути спокусливо робити припущення про тип пристрою на основі розміру його екрану (наприклад, що екран з шириною менше 500 пікселів належить мобільному телефону), це не завжди правда. Завжди проектуйте з думкою про різноманітність пристроїв та розмірів екранів. |
| Нотатка: | Не плутайте реальний розмір екрану з доступним розміром. Властивості |
Синтаксис
let screenObj = window.screen;
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
0.10.0 |
1.0 |
Приклади
Цей код виведе повідомлення для користувачів, чий екран має розширення менше ніж 1024x768. Це може бути корисно для застосунків, які оптимізовані для певних розширень.
if(screen.width < 1024 || screen.height < 768) {
alert("Для кращого відображення рекомендуємо використовувати розширення 1024x768 або більше.");
}
Якщо екран користувача підтримує лише невелику глибину кольору (16 біт або менше), то до тіла документа додається спеціальний клас. Це може бути корисно для веб-сайтів, що хочуть надати оптимізовані зображення для пристроїв із обмеженою глибиною кольору.
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');
}
Методи
Властивості
availHeight- Вказує висоту екрану, доступну для вікна браузера, в пікселях.
colorDepth- Повертає кількість бітів на кольоровий компонент на екрані.
availWidth- Вказує ширину екрану, доступну для вікна браузера, в пікселях.
height- Повертає висоту екрану користувача в пікселях.
pixelDepth- Повертає кількість бітів на піксель на екрані користувача.
width- Повертає ширину екрану користувача в пікселях.