如何在移动 Safari for Web 应用程序中计算可视区域的高度（即窗口高度减去地址和书签栏）？答案

【问题标题】：How to calculate height of viewable area (i.e., window height minus address & bookmark bars) in mobile Safari for web app?如何在移动 Safari for Web 应用程序中计算可视区域的高度（即窗口高度减去地址和书签栏）？
【发布时间】：2013-10-03 02:15:11
【问题描述】：

计算移动 Safari 上可用的可视空间的正确方法是什么？查看区域是指 Web 应用程序实际可用的屏幕大小，即窗口高度减去地址栏和书签栏。

iOS 7 禁止隐藏地址栏，我们需要适当考虑视口高度。

【问题讨论】：

标签： iphone ios safari mobile-safari ios7

【解决方案1】：

window.innerWidth 和window.innerHeight 将给出视口的宽度和高度。

【讨论】：

这似乎不适用于 iOS 7； window.innerHeight 在减去地址栏和书签栏后不会产生高度。我们还需要做点别的吗？
在运行 iOS 7.0.2 的 iPhone 4S 上，window.screen.availHeight 给出 460。即 480px 减去状态栏的高度。在地址栏和标签栏都可见的情况下，window.innerHeight 为 373。如果我随后滚动以最小化地址栏并隐藏标签栏，window.innerHeight 报告 441。
嗯，您访问此页面时获得了什么价值：tekiki.com/default/test？我们得到 1109。整个页面的代码是这样的：
将这个添加到 head 元素中：你会得到 372 .
window.screen.availHeight 在带或不带工具栏和大/小地址栏的 iphone5S/ios7.0.3 上返回 548； window.innerHeight 初始返回 529，滚动后返回 460。

【解决方案2】：

我知道这是 5 年前的帖子，但据我所知，这个问题仍然存在。我的解决方法：在页面上使用 CSS 样式的 HTML 元素：.el{ height:100vh; } 并使用 jQuery 将像素高度检索到 Javascript：$('.el').height();

如果您对此类元素没有实际用途，您可能会为了确保视口而即时创建一个：

var vh = $('<div style="height:100vh"></div>"').appendTo('body').height();
$('body div:last-child').remove();

【讨论】：

【解决方案3】：

将根容器元素的 CSS height（我们称之为 rootElement）设置为视口的高度：

.root-element {
  height: 100vh;
}

然后，当页面渲染时，运行此代码将rootElement 高度更新为视口高度减去浏览器 UI 栏的大小（例如，在 iOS Safari 上：顶部地址栏、底部导航栏……）：

const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = `calc(100vh - ${browserUiBarsH}px)`;

此解决方案将根容器的大小设置为可用的大小，但它还保留了在调整窗口大小时（例如，在桌面上使用时）浏览器适应 rootElement 高度的可能性。

【讨论】：

适用于 Android Chrome，版本 87.0428066 也已测试。 提示：将值用作 css 变量

【解决方案4】：

对于 2020 年到来的任何人，window.screen.availHeight 是唯一一个可以作为@Marcel Falliere 下方评论的人。

【讨论】：