От автора: замерить размеры и разрешение экрана с помощью JS может быть не так просто. Не только потому что трудно определить, что изменять, но и потому, что исторически сложилось так, что разные браузеры измеряют разные качества экрана с помощью разных свойств. Сегодня эти свойства по большей части стандартизированы. Нужно лишь выучить термины.
Ширина и высота вьюпорта
Размеры активного окна браузера:
|
1 2 |
let windowX = document.documentElement.clientWidth, windowY = document.documentElement.clientHeight; |
Измеряют ширину и высоту CSS вьюпорта, если задан no scrollbar. В противном случае равны ширине и высоте вьюпорта минус ширина полосы прокрутки.
|
1 2 |
let windowX = window.innerWidth, windowY = window.innerHeight; |
Так измеряется CSS ширина вьюпорта с полосой прокрутки. Можно сбросить с помощью зума на странице.
Вьюпорт – область отображения в окне браузера. Она не включает в себя адресную строку и интерфейс браузера.
Поэтому для наилучшего измерения размеров вьюпорта необходимо взять большие значения:
|
1 2 |
let windowW = Math.max(document.documentElement.clientWidth, window.innerWidth), windowH = Math.max(document.documentElement.clientHeight, window.innerHeight); |
Ширина и высота экрана
Ширину и высоту экрана вычислить проще:
|
1 2 |
let screenW = screen.width, screenH = screen.height; |
Экран – та область отображения, в которой расположен браузер (на многих устройствах сейчас может быть более одного экрана).
Перерасчет
Нужно помнить о том, что высота и ширина экрана изменятся при смене ориентации и изменении размеров:
вращение в основном относится к мобильным устройствам, но также и к настольным мониторам с вращающейся подставкой;
изменение размеров влияет на ширину и высоту на десктопе, но никак не влияет на мобильные устройства.
Поэтому лучше объявлять переменные сверху первыми (делая их глобальными), а их вычисление поместить в функции. Вызов функций делать после загрузки страницы и после срабатывания подходящих событий:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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()); |
Источник: //thenewcode.com/
Редакция: Команда webformyself.
