关于iPhone：如何计算可见区域的高度(即窗口高度减去地址)


How to calculate height of viewable area (i.e., window height minus address & bookmark bars) in mobile Safari for web app?

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

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

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

相关讨论

对于2020年以后的任何人来说，window.screen.availHeight是下面唯一用作@Marcel Falliere注释的人。

将根容器元素(称为rootElement)的CSS height设置为视口的高度：

1
2
3
.root-element {
  height: 100vh;
}

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

1
2
3
4
5
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高度。 >

相关讨论

我知道这是5岁的帖子，但是正如我所知，这个问题仍然存在。我的解决方法：
在使用CSS：.el{ height:100vh; }样式的页面上使用HTML元素，并使用jQuery：$('.el').height();

将以像素为单位的高度检索到Javascript。

如果您对此类元素没有实际用途，则可以出于维护视口的唯一目的而即时创建一个元素：

1
2
var vh = $('"').appendTo('body').height();
$('body div:last-child').remove();