Window, Window: измерение размеров экрана с помощью JavaScript

Window, Window: измерение размеров экрана с помощью JavaScript

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

Ширина и высота вьюпорта

Размеры активного окна браузера:

let windowX = document.documentElement.clientWidth,
windowY = document.documentElement.clientHeight;

Измеряют ширину и высоту CSS вьюпорта, если задан no scrollbar. В противном случае равны ширине и высоте вьюпорта минус ширина полосы прокрутки.

let windowX = window.innerWidth,
windowY = window.innerHeight;

Так измеряется CSS ширина вьюпорта с полосой прокрутки. Можно сбросить с помощью зума на странице.

Вьюпорт – область отображения в окне браузера. Она не включает в себя адресную строку и интерфейс браузера.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Поэтому для наилучшего измерения размеров вьюпорта необходимо взять большие значения:

let windowW = Math.max(document.documentElement.clientWidth, window.innerWidth),
windowH = Math.max(document.documentElement.clientHeight, window.innerHeight);

Ширина и высота экрана

Ширину и высоту экрана вычислить проще:

let screenW = screen.width,
screenH = screen.height;

Экран – та область отображения, в которой расположен браузер (на многих устройствах сейчас может быть более одного экрана).

Перерасчет

Нужно помнить о том, что высота и ширина экрана изменятся при смене ориентации и изменении размеров:

вращение в основном относится к мобильным устройствам, но также и к настольным мониторам с вращающейся подставкой;

изменение размеров влияет на ширину и высоту на десктопе, но никак не влияет на мобильные устройства.

Поэтому лучше объявлять переменные сверху первыми (делая их глобальными), а их вычисление поместить в функции. Вызов функций делать после загрузки страницы и после срабатывания подходящих событий:

let screenW = screenH = windowW = windowH = false;

var calcScreen = function() {
  screenW = screen.width;
  screenH = screen.height;
  windowW = Math.max(document.documentElement.clientWidth, window.innerWidth);
  windowH = Math.max(document.documentElement.clientHeight, window.innerHeight);
};

calcScreen();
window.addEventListener("resize", calcScreen());
window.addEventListener("orientationchange", calcScreen());

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree