(这是一个多部分的问题,我会尽力总结场景。)
我们目前正在构建一个响应式网络应用程序(新闻阅读器),它允许用户在选项卡式内容之间滑动,以及在每个选项卡式内容内垂直滚动。
解决该问题的一种常见方法是使用一个div填充浏览器视口的包装器,设置overflow为hiddenor auto,然后在其中水平和/或垂直滚动。
div
overflow
hidden
auto
这种方法很棒,但有一个主要缺点: 由于文档的高度与浏览器视口完全相同,因此移动浏览器不会隐藏地址栏/导航菜单 。
有许多技巧和视口属性可以让我们获得更多的屏幕空间,但没有一个比minimal- ui(在 iOS 7.1 中引入)更有效。
minimal- ui
昨天有消息称 iOS 8 beta4 已从Mobile Safari 中删除(请参阅iOS 8 发行说明minimal-ui中的 Webkit 部分),这让我们感到疑惑:
minimal-ui
Q1。 是否仍然可以隐藏 Mobile Safari 上的地址栏?
据我们所知,iOS 7不再响应hack window.scrollTo,这表明我们必须忍受更小的屏幕空间,除非我们采用垂直布局或使用mobile-web- app-capable.
window.scrollTo
mobile-web- app-capable
Q2。 是否还能有类似的软全屏体验?
软 全屏 我的意思是不使用mobile-web-app-capable元标记。
mobile-web-app-capable
我们的网络应用程序可访问,任何页面都可以使用本机浏览器菜单添加书签或共享。通过添加mobile-web-app- capable,我们可以防止用户调用此类菜单(当它保存到主屏幕时),这会使用户感到困惑和反感。
mobile-web-app- capable
minimal- ui曾经是中间立场,默认情况下隐藏菜单但通过点击保持可访问- 尽管Apple可能由于其他可访问性问题(例如用户不知道在哪里点击以激活菜单)而将其删除。
Q3。 全屏体验值得麻烦吗?
似乎全屏 API不会很快出现在 iOS 上,但即使是这样,我也看不到菜单将如何保持可访问性(Android 上的 Chrome 也是如此)。
在这种情况下,也许我们应该让移动 safari 保持原样,并考虑视口高度(对于 iPhone 5+,它是 460 = 568 - 108,其中 108 包括操作系统栏、地址栏和导航菜单;对于 iPhone 4 或旧的,它是 372)。
希望听到一些替代方案(除了构建本机应用程序)。
iOS 8不再支持minimum-ui 视口属性。但是,minimal-ui 本身并没有消失。用户可以通过“触摸向下”手势进入最小用户界面。
管理视图状态有几个前提条件和障碍,例如,要让最小用户界面工作,必须有足够的内容让用户能够滚动;为了使最小用户界面持续存在,窗口滚动必须在页面加载时和方向更改后偏移。但是,无法使用该screen变量计算最小用户界面的尺寸,因此无法提前告知用户何时处于最小用户界面。
screen
这些观察结果是作为 iOS 8 开发 Brim“浏览器”管理器的 一部分进行的研究的结果。最终实现的工作方式如下:
加载页面时,Brim 将创建一个跑步机元素。跑步机元素用于为用户提供滚动空间。跑步机元素的存在确保用户可以进入最小用户界面视图,并且如果用户重新加载页面或更改设备方向,它会继续存在。它对用户始终是不可见的。该元素具有 ID brim-treadmill。 在加载页面或更改方向后,Brim 正在使用 Scream检测页面是否处于最小 ui 视图中(如果内容高度为大于视口高度)。 当页面处于最小用户界面时,Brim 将禁用文档的滚动(它以一种不影响主元素内容的安全方式执行此操作)。禁用文档滚动可防止向上滚动时意外离开最小用户界面。根据最初的 iOS 7.1 规范,点击顶部栏会带回 chrome 的其余部分。
加载页面时,Brim 将创建一个跑步机元素。跑步机元素用于为用户提供滚动空间。跑步机元素的存在确保用户可以进入最小用户界面视图,并且如果用户重新加载页面或更改设备方向,它会继续存在。它对用户始终是不可见的。该元素具有 ID brim-treadmill。
brim-treadmill
在加载页面或更改方向后,Brim 正在使用 Scream检测页面是否处于最小 ui 视图中(如果内容高度为大于视口高度)。
当页面处于最小用户界面时,Brim 将禁用文档的滚动(它以一种不影响主元素内容的安全方式执行此操作)。禁用文档滚动可防止向上滚动时意外离开最小用户界面。根据最初的 iOS 7.1 规范,点击顶部栏会带回 chrome 的其余部分。
最终结果如下所示:
为了文档,如果您更喜欢编写自己的实现,值得注意的是,您不能在orientationchange事件之后立即使用Scream来检测设备是否处于minimal- ui中,因为尺寸不会反映新的方向,直到旋转动画已经结束。您必须将侦听器附加到orientationchangeend事件。window
window
Scream和orientationchangeend已作为该项目的一部分开发。