网页未在 iOS 8 上的 Twitter 应用程序中获得 100% 高度 [英] Web page not getting 100% height in Twitter app on iOS 8

问题描述

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

OS: iOS 8.1.1 Browser: Safari Phone: iPhone 5C

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

We have a web page which takes 100% height and width. We have locked down the viewport so that the user can not scroll the page vertically or horizontally. This page is shared on Twitter via Safari web browser. When we view the the web page in the twitter app the bottom part of the page gets cut off. We are not able to view the page in its entirety. Even if we change the orientation multiple times still the cut off part is not visible.

被截断的部分的高度等于 twitter 应用容器的头部(有十字按钮、页面标题/url 和分享链接的部分)和状态栏(有网络的部分)的高度状态图标、时间、电池电量等)

The height of the part which is getting cut off is equal to the height of the twitter app container’s header (the part which has cross button, page title/url and share link) and the status bar (the part which has network status icon, time, battery level etc)

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

推荐答案

在过去的几个小时里，这也让我发疯.解决方案是不使用基于 px 或百分比的高度/宽度，而是在 html 和 body 元素上使用 position:fixed，然后设置顶部, left, right, bottom to 0. 所以你的代码看起来像这样:

This has also been driving me crazy for the past several hours. The solution is to not use px or percentage based heights/widths but rather use position:fixed on your html and body elements, then setting top, left, right, bottom to 0. So your code will looks like this:

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

这会强制内容仅与 twitters webview 组件中呈现的视口一样宽和高，而不会溢出.正文中的任何代码现在可以在任一方向 100% 显示，而无需担心被隐藏.这个错误也影响了 iOS9.确认该修复程序在 iOS9.1 上运行，并在 ip6/6+、ip5 和 ip4 上使用最新的 Twitter 应用程序.

This forces the content to only be as wide and as tall as the viewport presented in twitters webview component without overflowing. Any code inside the body can now be 100% in either direction without fear of being hidden. This bug was affecting iOS9 as well. Confirmed the fix is working on iOS9.1 with latest Twitter app on ip6/6+, ip5, and ip4.

这篇关于网页未在 iOS 8 上的 Twitter 应用程序中获得 100% 高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！