Как получить высоту области просмотра на мобильном устройстве независимо от текущего состояния скрытия / отображения строки URL-адреса?

Question

На мобильных устройствах (например, Chrome на Android) высота области просмотра изменяется в зависимости от того, скрыта ли URL / адресная строка, или в зависимости от того, прокручиваете ли вы страницу вверх или вниз.

Учитывая это, мне нужно 2 переменные:

1. Высота области просмотра, если отображалась панель URL (независимо от фактического состояния).
2. Высота области просмотра, если панель URL была , а не показ (независимо от фактического состояния).

Другими словами: "min" и "max" высоты области просмотра.Как бы я поступил так?Я только знаю, как получить:

• Высота области просмотра с учетом текущего состояния панели URL (показывает / не показывает).

Делая: Math.max(document.documentElement.clientHeight, window.innerHeight || 0) (источник:https://stackoverflow.com/a/8876069/473368).

Answer 1

Для этого используйте свойство window.outerHeight:

Window.outerHeight возвращает высоту в пикселях всего окна браузера.Он представляет высоту всего окна браузера, включая боковую панель (если развернута), хром окна и границы / маркеры изменения размера окна.

Чтобы развернуть свою функцию, просто сравните window.outerHeight и window.innerHeight:

let maxHeight = Math.max(window.innerHeight || 0, window.outerHeight || 0);
let minHeight = Math.min(window.innerHeight || 0, window.outerHeight || 0);
console.log(maxHeight, minHeight);