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

Question

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

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

Answer 1

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

Answer 2

对于 2020 年到来的任何人来说，window.screen.availHeight这是唯一一个符合@Marcel Falliere以下评论的人。

Answer 3

height将根容器元素（我们称之为）的 CSS 设置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窗口大小时（例如在桌面上使用时）浏览器调整高度的可能性。

Answer 4

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