Question

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

iOS 7可以防止隐藏地址栏，我们需要正确考虑视口高度。

Answer 1

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

Answer 2

对于在2020年到来的人，window.screen.availHeight是下面@Marcel Falliere的唯一评论。

Answer 3

我知道这是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();

Answer 4

将根容器元素的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的高度。

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

4 个答案: