网页在 iOS 8 上的 Twitter 应用程序中没有获得 100% 的高度

Question

操作系统： iOS 8.1.1浏览器： 野生动物园手机： 苹果手机 5C

我们有一个高度和宽度为100%的网页。我们已经锁定了视口，以便用户无法垂直或水平滚动页面。此页面通过 Safari 网络浏览器在 Twitter 上共享。当我们在Twitter应用程序中查看网页时，页面的底部被切断。我们无法完整查看该页面。即使我们多次改变方向，切断部分仍然不可见。

被切断的部分的高度等于 Twitter 应用程序容器的标题（具有十字按钮、页面标题/URL 和共享链接的部分）和状态栏（具有网络状态图标、时间、电池电量等的部分）的高度

注意：仅在 iOS 8 中观察到此行为。

Answer 1

在过去的几个小时里，这也让我发疯。解决方案是不使用基于px或百分比的高度/宽度，而是在html上使用position:fixed并body元素，然后将顶部，左侧，右侧，底部设置为0。所以你的代码将如下所示：

html, body{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

这会强制内容仅与 twitters Web 视图组件中显示的视区一样宽和高度，而不会溢出。身体内的任何代码现在可以 100% 在任一方向上，而不必担心被隐藏。这个错误也影响了iOS9。确认该修复程序适用于 iOS9.1 和 ip6/6+、ip5 和 ip4 上的最新 Twitter 应用程序。

Answer 2

对于遇到此问题的其他任何人，我最终使用的修复程序是

    window.addEventListener("resize", function(){
      onResize();
    });
    function onResize(){
      document.querySelector("html").style.height = window.innerHeight + "px"
    };
    onResize();

这似乎适用于Safari上最新版本的Twitter浏览器。