Window, Window: вимірювання розмірів екрану за допомогою JavaScript

33

Від автора: заміряти розміри і дозвіл екрану з допомогою 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());