Як отримати розміри екрана, вікна і веб-сторінки в JavaScript

09.10.20. ⏰Час прочитання - 3,5 хв

Для визначення вікна браузера (ландшафтного чи портретного) достатньо порівняти його ширину та висоту. Але у всіх можливих доступних нам розмірах можна легко заплутатись, тому що існують розміри екрану, вікна, веб-сторінки і так далі. Що означають ці розміри, а головне, як їх отримати? Ловіть коротку замітку.

Екран

Розмір екрана

Розмір екрана — це ширина та висота всього екрана: монітора та мобільного дисплею.

Отримати інформацію про розмір екрана можна за допомогою властивості screen об'єкта window:

const screenWidth = window.screen.width 
const screenHeight = window.screen.height

Доступний розмір екрана

Доступний розмір екрана — це ширина і висота активного екрана без панелі інструментів операційної системи.

Щоб отримати доступний розмір екрана, потрібно знову звернутися до window.screen:

const availableScreenWidth = window.screen.availWidth 
const availableScreenHeight = window.screen.availHeight

Вікно

Розмір зовнішнього вікна

Зовнішній розмір вікна — це ширина та висота поточного вікна браузера, включаючи адресний рядок, панель вкладок та інші панелі браузера.

Отримати інформацію про розмір зовнішнього вікна можна за допомогою властивостей outerWidth та outerHeight об'єкта window:

const windowOuterWidth = window.outerWidth 
const windowOuterHeight = window.outerHeight

Внутрішній розмір вікна

Розмір внутрішнього вікна — це ширина і висота області перегляду (в'юпорта).

Об'єкт window надає властивості innerWidth та innerHeight:

const windowInnerWidth = window.innerWidth 
const windowInnerHeight = window.innerHeight

Якщо ми хочемо отримати внутрішній розмір вікна без ділянок прокрутки, то треба зробити наступне:

const windowInnerWidth = document.documentElement.clientWidth 
const windowInnerHeight = document.documentElement.clientHeight

Розмір веб-сторінки

Розмір веб-сторінки — це ширина та висота всього вмісту (відрендереного контенту).

Щоб отримати розмір веб-сторінки, використовуйте наступне (містить внутрішні відступи сторінки, але не включає межі, зовнішні відступи та смуги прокрутки):

const pageWidth = document.documentElement.scrollWidth 
const pageHeight = document.documentElement.scrollHeight

Якщо pageHeight більша, ніж внутрішня висота вікна, тоді присутня вертикальна смуга прокрутки.

Висновок

Сподіваємось, тепер Ви розумієте, як отримувати різні розміри.

Розмір екрана — це розмір монітора (чи дисплея), а доступний розмір екрана — це розмір без панелей інструментів ОС.

Зовнішній розмір вікна — це розмір активного вікна браузера (включаючи пошуковий рядок, панель вкладок, відкриті бічні панелі та ін.), А внутрішній розмір вікна — це розмір області перегляду.

І розмір веб-сторінки — це розмір контенту.