Iphone 如何在mobile Safari for web app中计算可视区域的高度（即窗口高度减去地址和书签栏）？

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

---

iOS 7防止隐藏地址栏，我们需要正确计算视口高度。

窗口。innerWidth

和

窗口。innerHeight

将给出视口的宽度和高度。

我知道这是一篇5年前的文章，但我知道这个问题仍然存在。我的解决方法： 在页面上使用样式为CSS的HTML元素：

.el{height:100vh；}

并使用jQuery:

$（'.el'）.height（）检索以像素为单位的Javascript高度

如果此类元素没有实际用途，您可以动态创建一个元素，其唯一目的是制作视口：

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

var vh=$（'”）.appendTo（'body'）.height（）；
$（'body div:last child'）.remove（）；
将根容器元素（我们称之为
rootElement
）的CSS
高度设置为查看端口的高度：

.root元素{
高度：100vh；
}

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

此解决方案将根容器的大小设置为可用的大小，但它还允许浏览器在调整窗口大小时（例如，在桌面上使用时）调整
rootElement
高度.
对于2020年到来的任何人来说，
window.screen.availHeight
是唯一一个可以作为
@Marcel Falliere
下面评论使用的。
这似乎在iOS 7上不起作用；window.innerHeight在减去地址和书签栏后不会产生高度。我们还需要做些什么吗？在运行iOS的iPhone 4S上7.0.2，
window.screen.availHeight
给出460，即480px减去状态栏的高度。当地址栏和标签栏都可见时，
window.innerHeight
为373。如果我滚动最小化地址栏并隐藏标签栏，
window.innerHeight
报告441.Hmm，当您访问t时，您得到了什么值他的页面：？我们得到1109。整个页面的代码如下：setTimeout（function（）{alert（window.innerHeight）；}，500）；将此添加到head元素：您将得到372。
window.screen.availHeight
iphone5S/ios7.0.3上返回548，带或不带工具栏和大/小地址栏；
window.innerHeight
滚动后返回初始值529和460。也适用于Android Chrome，版本87.0428066，经过测试。提示：将该值用作css变量能够的
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)`;