iOS 7 Safari导航栏高度偏移问题

Question

iOS 6及以前版本中，Safari浏览器底部的导航栏是固定的，并且不会自动隐藏。因此，如果您想要一个100%高度的文档真正全屏显示，您必须添加额外的60像素，以便将其向上滚动并隐藏地址栏。

现在，在iOS 7中，导航栏可以自动隐藏，地址栏也可以调整大小，那么如何创建100%高度的文档呢？换句话说，我想能够将文档向上滚动，使导航栏消失，地址栏调整为迷你版本，然后文档高度将填充剩余空间（窗口高度减去大约100像素），以便您无法进一步滚动。

- Bobe

---

这个有帮助吗？（链接为：https://dev59.com/zWsy5IYBdhLWcg3w9Srk） - Ojame

IOS7 Safari在浏览器页脚出现和消失时不会触发调整大小事件，所以你可能会很遗憾。我相信jQuery Mobile团队正在研究解决方法，但现在你可能需要重新考虑你的方法。 - Blazemonger

参见此文章。 - Blazemonger

Answer 1

看起来传统的方法仍然可行，只需添加额外高度即可，但现在需要添加的值是69px而不是60px。

- Bobe

---

太棒了。将60改为69的这个小修复解决了我遇到的问题。 - lislis

Answer 2

在iOS 7.x beta中，有一个名为"minimal-ui"的新元属性，看起来将提供此功能，而无需任何黑客技巧。

这是一个未来的功能，可能对您没有帮助。 单击此处(滚动到Safari)阅读更多信息。

- matthewbeta

Answer 3

针对缺失的resize()事件的解决方法：

var windowInnerHeight = window.innerHeight;

setInterval(function() {
    if (windowInnerHeight != window.innerHeight) {
        windowInnerHeight = window.innerHeight;
        resize();
        window.scrollTo(0, 0);
    }
}, 500);

- Petr