javascript - 如何在移动设备上独立于 URL 栏的当前隐藏/显示状态获取视口(viewport)高度？

Question

在移动设备上(例如 Android 上的 Chrome)，视口(viewport)高度会根据 URL/地址栏是否隐藏而变化，这会根据您是在页面上向上滚动还是向下滚动而变化。

鉴于此，我需要 2 个变量:

1. 显示 URL 栏时的视口(viewport)高度(无论实际状态如何)。
2. URL 栏未显示时的视口(viewport)高度(无论实际状态如何)。

换句话说:“最小”和“最大”视口(viewport)高度。我该怎么做呢？我只知道如何获取:

• 给定 URL 栏当前状态(显示/不显示)的视口(viewport)高度。

通过执行:Math.max(document.documentElement.clientHeight, window.innerHeight || 0)(来源:https://stackoverflow.com/a/8876069/473368)。

Answer 1

为此，使用 window.outerHeight 属性:

Window.outerHeight gets the height in pixels of the whole browser window. It represents the height of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

要扩展你的功能，只需比较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);