Определение разрешения экрана с помощью JavaScript

Быстрый ответ

Для получения разрешения экрана вашего устройства воспользуйтесь методами window.screen.width, определяющим ширину, и window.screen.height, определяющим высоту:

console.log(`Привет, разрешение твоего экрана следующее: ${window.screen.width}x${window.screen.height}`);

Данный код отобразит разрешение экрана в формате ширина х высота для удобного восприятия.

Основные различия: Абсолютные размеры против доступного экранного пространства

Определение абсолютного размера экрана

let totalWidth = window.screen.width; // Полная ширина
let totalHeight = window.screen.height; // Полная высота

Переменные totalWidth и totalHeight позволяют узнать абсолютные размеры экрана, как если бы вы задали вопрос монитору: "Каковы твои реальные габариты в пикселях?".

Подробнее об этом расскажет наш спикер на видео

Определение доступного размера экрана

А как же быть с доступным пространством на экране? Для этого пригодятся availWidth и availHeight:

let usableWidth = window.screen.availWidth; // Ширина за вычетом панели задач и прочих элементов
let usableHeight = window.screen.availHeight; // Высота за вычетом панелей инструментов браузера

Мобильные устройства и плотность пикселей

Мобильные устройства обычно гордятся плотностью пикселей, которая влияет на разрешение экрана, что особенно заметно на экранах с ретина-дисплеем:

let devicePixelRatio = window.devicePixelRatio || 1;
let actualWidth = totalWidth * devicePixelRatio;
let actualHeight = totalHeight * devicePixelRatio;

devicePixelRatio учитывает различие между CSS-пикселями и пикселями физического устройства, что важно при создании адаптивного дизайна и медиазапросов.

Размеры области просмотра

Иногда важно знать размеры не всего экрана, а только той части, которая отображает ваш веб-сайт — это и есть вьюпорт:

let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;

Эти переменные возвращают размеры области просмотра, свободной от панелей инструментов и полос прокрутки. Они показывают пространство, которое доступно для отображения контента веб-страницы.

Визуализация

Представьте полотно, которое растягивается по размерам стены, на которой оно висит:

const wallW = window.screen.width;  // Ширина полотна соответствует ширине стены
const wallH = window.screen.height; // Высота полотна подстраивается под высоту стены

Этот образ иллюстрирует принцип, по которому веб-контент подстраивается под размеры экрана с помощью свойств Javascript.

Экскурс: Прочие аспекты разрешения экрана

Веб-разработчики обычно считают стандартное разрешение равным 72 dpi, при этом JavaScript не предоставляет информацию о физическом разрешении экрана, лишь данные о количестве пикселей, что важно для адаптивного дизайна.

Стандартное разрешение считается исходя из того, что каждый пиксель квадратный. Однако для JavaScript неквадратные пиксели, встречающиеся крайне редко, недоступны. Следует также помнить, что физический размер экрана остается неизвестным для браузера.

Для пользователей jQuery доступны методы $(window).width() и $(window).height(), предлагающие аналогичную функциональность.

Полезные материалы

Для более детального изучения темы предлагаем ознакомиться со следующими ресурсами:

• Window: screen property – Web APIs | MDN
• Адаптивный веб-дизайн и медиазапросы – W3Schools
• История двух вьюпортов — часть первая – QuirksMode
• Window: matchMedia() метод – Web APIs | MDN
• Типографика в размерах вьюпорта | CSS-Tricks
• Событие onresize – W3Schools