iOS 8删除了“ minimum-ui”视口属性，是否还有其他“软全屏”解决方案？

Question

我们目前正在构建一个响应式Web应用程序（新闻阅读器），允许用户在选项卡式内容之间滑动以及在每个选项卡式内容内垂直滚动。解决该问题的常用方法是使用一个包装器div来填充浏览器视口，将其设置overflow为hidden或auto，然后在其中进行水平和/或垂直滚动。这种方法很棒，但有一个主要缺点：由于文档的高度与浏览器视口完全相同，因此移动浏览器不会隐藏地址栏/导航菜单。有许多hack和视口属性可以使我们获得更多的屏幕空间，但效果却不如minimal-uiiOS 7.1中引入的效果。昨天有消息称iOS 8 beta4已从minimal-uiMobile Safari中删除（请参阅iOS 8发行说明中的 Webkit部分），这使我们感到奇怪：Q1。是否仍然可以在Mobile Safari中隐藏地址栏？据我们所知，iOS 7 不再对这种window.scrollTo入侵做出响应，这表明我们必须使用较小的屏幕空间，除非我们采用垂直布局或使用mobile-web-app-capable。Q2。是否仍有可能获得类似的软全屏体验？通过软全屏，我的意思是不使用mobile-web-app-capablemeta标签。我们的网络应用程序构建为易于访问，可以使用本机浏览器菜单将任何页面添加为书签或共享。通过添加，mobile-web-app-capable我们防止用户调用这样的菜单（当菜单保存到主屏幕时），这会使用户感到困惑和反感。minimal-ui过去是中间地带，默认情况下隐藏菜单，但可通过轻按使其保持访问状态 -尽管Apple可能由于其他可访问性问题（例如用户不知道在何处激活菜单）而将其删除。Q3。全屏体验值得吗？似乎全屏API不会很快进入iOS，但是即使这样，我也看不到菜单如何保持可访问性（Android上的Chrome也是如此）。在这种情况下，也许我们应该只保留移动浏览器，并考虑视口高度（对于iPhone 5+，它是460 = 568-108，其中108包括OS栏，地址栏和导航菜单；对于iPhone 4或更老的是372）。很想听听其他选择（除了构建本机应用程序之外）。

Answer 1

只需向Minimum-ui说再见（目前）

的确如此，minimal-ui既有用又有害，而且我认为这种权衡现在又有一个平衡点，支持更新，更大的iPhone。

在处理HTML5应用程序的js框架时，我一直在处理该问题。在尝试了许多解决方案（每种都有其缺点）之后，我屈服于考虑iPhone上6之前的空间损失。考虑到这种情况，我认为唯一可靠且可预测的行为是预定的行为。

简而言之，我最终阻止了任何形式的minimal-ui，因此至少我的屏幕高度始终是相同的，并且您始终知道应用程序的实际空间。

在时间的帮助下，足够多的用户将有更多的空间。

编辑

我该怎么做

出于演示目的，对此进行了一些简化，但是应该为您工作。假设您有一个主容器

html, body, #main {

  height: 100%;

  width: 100%;

  overflow: hidden;

}

.view {

  width: 100%;

  height: 100%;

  overflow: scroll;

}

然后：

然后使用js，将#main的高度设置为窗口的可用高度。这也有助于处理iOS和Android中发现的其他滚动错误。这也意味着您需要处理如何更新它，只需注意；

达到滚动范围时，我会阻止过度滚动。这一点在我的代码中更深入，但我认为您也可以遵循此答案的基本功能。我认为这可能会稍作调整，但可以完成工作。

附带说明：该应用程序也可添加书签，因为它使用内部路由来哈希地址，但我还添加了一个提示iOS用户将其添加到首页。我觉得这种方式有助于忠诚度和回头客（因此，失去的空间又回来了）。