Visual Browser Window Properties

Browser

Пример 1: 1920×1080

Пример: screen.width=1920, screen.height=1080, screen.availHeight=1050, outerHeight=1050, viewport (inner) = 1920×963.

Экран устройства (монитор)
screen.width × screen.height = 1920 × 1080
screen.colorDepth = 24, screen.pixelDepth = 24
Самая внешняя рамка — физический монитор в логических пикселях.
Рабочая область ОС
screen.availWidth × screen.availHeight = 1920 × 1050
screen.availTop = 0, screen.availLeft = 0
1080 − 1050 = ≈30 px съедает панель задач / системная панель.
Окно браузера (Outer)
outerWidth × outerHeight = 1920 × 1050
Всё окно: вкладки, адресная строка, рамки, скроллбары.
Viewport страницы (Inner)
width × height (innerWidth/innerHeight) = 1920 × 963
Эта область видна странице: CSS-медиа-запросы, JS и т.д.
Client-область
clientWidth ≈ 1920
clientHeight ≈ 963
Обычно viewport минус скроллбары. У тебя по ширине скроллбар может отсутствовать.
Документ (страница)
scrollWidth / scrollHeight — зависят от контента.
Если контент выше 963 px — появляется вертикальная прокрутка.

Пример 2: 1536×864, DPR = 2.5

Пример: Screen 1536×864, Avail 1536×816, Outer 1536×816, Inner 1536×729, Client 1521×729, Scroll 1481×2590, Device Pixel Ratio = 2.5.

Экран устройства (монитор)
Screen Width × Screen Height = 1536 × 864 (CSS-пиксели)
Физически ≈ 3840 × 2160 при DPR = 2.5
ColorDepth = 24, PixelDepth = 24
DPR > 1 значит, что реальных физических пикселей больше, чем CSS-пикселей.
Рабочая область ОС
Avail Width × Avail Height = 1536 × 816
Avail Top / Left = 0 / 0
864 − 816 = 48 px съедает док / панель задач или аналогичный элемент.
Окно браузера (Outer)
Outer Width × Outer Height = 1536 × 816
Screen X / Y = 0 / 0
Окно развёрнуто ровно на всю доступную область ОС.
Viewport страницы (Inner)
Inner Width × Inner Height = 1536 × 729
816 − 729 ≈ 87 px уходит на вкладки, адресную строку, панели браузера.
Client-область
Client Width × Client Height = 1521 × 729
1536 − 1521 = 15 px — ширина вертикального скроллбара.
Документ (страница)
Scroll Width × Scroll Height = 1481 × 2590
Scroll X / Y = 0 × 700
Visual Viewport ≈ 1520.8 × 729.2
Страница по высоте сильно больше viewport (2590 против 729), поэтому есть длинная вертикальная прокрутка; сейчас прокрутка на 700 px.