javascript - iOS 8 移除了 "minimal-ui"视口(viewport)属性，还有其他 "soft fullscreen"的解决方案吗？

Question

(这是一个多部分的问题，我会尽力总结场景。)

我们目前正在构建一个响应式网络应用(新闻阅读器)，它允许用户在选项卡式内容之间滑动，以及在每个选项卡式内容内垂直滚动。

解决该问题的常见方法是使用填充浏览器视口(viewport)的包装器 div，将 overflow 设置为 hidden 或 自动，然后在其中水平和/或垂直滚动​​。

这种方法很棒，但有一个主要缺点:由于文档的高度与浏览器视口(viewport)完全相同，因此移动浏览器不会隐藏地址栏/导航菜单。。 p>

有numerous hacks and viewport properties这使我们能够获得更多的屏幕空间，但没有一个比 minimal-ui(在 iOS 7.1 中引入)更有效。

昨天有消息称 iOS 8 beta4 已经从 Mobile Safari 中删除了 minimal-ui(参见 iOS 8 Release Notes 中的 Webkit 部分)，这让我们感到疑惑:

第一季度。是否仍然可以在 Mobile Safari 上隐藏地址栏？

据我们所知，iOS 7 no longer responds对于 window.scrollTo hack，这表明我们必须适应较小的屏幕空间，除非我们采用垂直布局或使用 mobile-web-app-capable。

第二季度。是否还能有类似的软全屏体验？

soft fullscreen 我的意思是不使用 mobile-web-app-capable 元标记。

我们的 Web 应用程序可访问，任何页面都可以使用 native 浏览器菜单添加书签或共享。通过添加 mobile-web-app-capable，我们可以防止用户调用此类菜单(当它保存到主屏幕时)，这会使用户感到困惑和反感。

minimal-ui 曾经是中间地带，默认隐藏菜单但是keeping it accessible with a tap -- 尽管 Apple 可能会因为其他可访问性问题(例如用户不知道在哪里点击以激活菜单)而将其删除。

第三季度。全屏体验值得吗？

似乎 fullscreen API不会很快进入 iOS，但即使是这样，我也看不到菜单将如何保持可访问性(Android 上的 Chrome 也是如此)。

在这种情况下，也许我们应该让移动 safari 保持原样，并考虑视口(viewport)高度(对于 iPhone 5+，它是 460 = 568 - 108，其中 108 包括操作系统栏、地址栏和导航菜单；对于iPhone 4 或更早版本，它是 372)。

很想听听一些替代方案(除了构建 native 应用程序)。

Answer 1

minimal-ui 视口(viewport)属性是no longer supported在 iOS 8 中。但是，minimal-ui 本身并没有消失。用户可以通过“touch-drag down”手势进入minimal-ui。

管理 View 状态有几个前提条件和障碍，例如为了让最小用户界面工作，必须有足够的内容让用户能够滚动；为了使最小用户界面持续存在，窗口滚动必须在页面加载时和方向更改后偏移。但是，there is no way of calculating the dimensions of the minimal-ui使用 screen 变量，因此无法提前告知用户何时处于最小用户界面中。

这些观察结果是作为开发 Brim – view manager for iOS 8 的一部分的研究结果。 。最终实现的工作方式如下:

When page is loaded, Brim will create a treadmill element. Treadmill element is used to give user space to scroll. Presence of the treadmill element ensures that user can enter the minimal-ui view and that it continues to persist if user reloads the page or changes device orientation. It is invisible to the user the entire time. This element has ID brim-treadmill.

Upon loading the page or after changing the orientation, Brim is using Scream to detect if page is in the minimal-ui view (page that has been previously in minimal-ui and has been reloaded will remain in the minimal-ui if content height is greater than the viewport height).

When page is in the minimal-ui, Brim will disable scrolling of the document (it does this in a safe way that does not affect the contents of the main element). Disabling document scrolling prevents accidentally leaving the minimal-ui when scrolling upwards. As per the original iOS 7.1 spec, tapping the top bar brings back the rest of the chrome.

最终结果如下所示:

为了文档，如果您更喜欢编写自己的实现，值得注意的是，您不能使用 Scream在 orientationchange 之后检测设备是否处于最小用户界面事件，因为 window 尺寸在旋转动画结束之前不会反射(reflect)新的方向。您必须将监听器附加到 orientationchangeend事件。

Scream和 orientationchangeend已作为该元素的一部分进行开发。