在iOS 8上的Twitter应用中,网页没有达到100%的高度

Question

操作系统:iOS 8.1.1 浏览器:Safari 手机:iPhone 5C

我们有一个网页,高度和宽度都是100%.我们已锁定视口,因此用户无法垂直或水平滚动页面.此页面通过Safari Web浏览器在Twitter上共享.当我们在twitter应用程序中查看网页时,页面的底部会被切断.我们无法完整地查看该页面.即使我们多次改变方向,仍然看不到截断部分.

被切断的部分的高度等于twitter app容器标题的高度(具有交叉按钮,页面标题/ url和共享链接的部分)和状态栏(具有网络状态图标的部分,时间,电池电量等)

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

Answer 1

在过去的几个小时里,这也让我发疯了.解决的办法是不使用像素或百分比基于高度/宽度,而是用position:fixed你的html和body元素,然后设置上,左,右,下至0.所以你的代码看起来是这样的:

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

这会强制内容仅与twitters webview组件中显示的视口一样宽和高,而不会溢出.身体内的任何代码现在可以在任一方向上100%,而不用担心被隐藏.这个bug也影响了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 浏览器。