在iOS 8上的Twitter应用程序中，网页未达到100%高度

操作系统：iOS 8.1.1 浏览器：Safari 电话：iphone5c

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

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

---

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

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

    window.addEventListener("resize", function(){
      onResize();
    });

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

    onResize();

---

在最新版本的twitter浏览器safari上，这似乎很管用。

在过去的几个小时里，这也让我抓狂。解决方案是不使用px或基于百分比的高度/宽度，而是在

html

和

body

元素上使用

position:fixed

，然后将top、left、right、bottom设置为0。因此，您的代码如下所示：

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

这将强制内容仅与twitters webview组件中显示的视口一样宽和一样高，而不会溢出。身体内的任何代码现在都可以100%地向任何方向移动，而不必担心被隐藏。这个bug也影响了iOS9。已确认修复程序正在iOS9.1上运行，最新的Twitter应用程序位于ip6/6+、ip5和ip4上