小编典典

iOS 8 移除了“minimal-ui”视口属性,还有其他“软全屏”解决方案吗?

all

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

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

解决该问题的一种常见方法是使用一个div填充浏览器视口的包装器,设置overflowhiddenor
auto,然后在其中水平和/或垂直滚动​​。

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

许多技巧和视口属性可以让我们获得更多的屏幕空间,但没有一个比minimal- ui(在 iOS 7.1 中引入)更有效。

昨天有消息称 iOS 8 beta4 已从Mobile Safari 中删除(请参阅iOS 8
发行说明
minimal-ui中的​​ Webkit
部分),这让我们感到疑惑:

Q1。 是否仍然可以隐藏 Mobile Safari 上的地址栏?

据我们所知,iOS 7不再响应hack window.scrollTo,这表明我们必须忍受更小的屏幕空间,除非我们采用垂直布局或使用mobile-web- app-capable.

Q2。 是否还能有类似的软全屏体验?

全屏 我的意思是不使用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)。

希望听到一些替代方案(除了构建本机应用程序)。


阅读 91

收藏
2022-07-06

共1个答案

小编典典

iOS 8不再支持minimum-ui 视口属性。但是,minimal-ui 本身并没有消失。用户可以通过“触摸向下”手势进入最小用户界面。

管理视图状态有几个前提条件和障碍,例如,要让最小用户界面工作,必须有足够的内容让用户能够滚动;为了使最小用户界面持续存在,窗口滚动必须在页面加载时和方向更改后偏移。但是,无法使用该screen变量计算最小用户界面的尺寸,因此无法提前告知用户何时处于最小用户界面。

这些观察结果是作为 iOS 8 开发 Brim“浏览器”管理器的
一部分进行的研究的结果。最终实现的工作方式如下:

加载页面时,Brim
将创建一个跑步机元素。跑步机元素用于为用户提供滚动空间。跑步机元素的存在确保用户可以进入最小用户界面视图,并且如果用户重新加载页面或更改设备方向,它会继续存在。它对用户始终是不可见的。该元素具有
ID brim-treadmill

在加载页面或更改方向后,Brim 正在使用 Scream检测页面是否处于最小 ui
视图中(如果内容高度为大于视口高度)。

当页面处于最小用户界面时,Brim
将禁用文档的滚动(它以一种不影响主元素内容的安全方式执行此操作)。禁用文档滚动可防止向上滚动时意外离开最小用户界面。根据最初的
iOS 7.1 规范,点击顶部栏会带回 chrome 的其余部分。

最终结果如下所示:

iOS模拟器中的边缘。

为了文档,如果您更喜欢编写自己的实现,值得注意的是,您不能在orientationchange事件之后立即使用Scream来检测设备是否处于minimal-
ui中,因为尺寸不会反映新的方向,直到旋转动画已经结束。您必须将侦听器附加到orientationchangeend事件。window

Screamorientationchangeend已作为该项目的一部分开发。

2022-07-06