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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перерасчет

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree