javascript - iOS 8删除了“minimal-ui”视口属性，还有其他“软全屏”解决方案吗？(iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?)

Question

(This is a multi-part question, I will try my best to summarise the scenario.)(（这是一个多部分的问题，我将尽力总结这个场景。）)

We are currently building a responsive web app (news reader) that allow users to swipe between tabbed content, as well as scroll vertically inside each tabbed content.(我们目前正在构建一个响应式Web应用程序（新闻阅读器），允许用户在选项卡式内容之间滑动，以及在每个选项卡式内容中垂直滚动。) A common approach to the problem is to have a wrapper div that fills the browser viewport, set overflow to hidden or auto , then scroll horizontally and/or vertically inside it.(这个问题的一个常见方法是使用一个包装器div填充浏览器视口，将overflow设置为hidden或auto ，然后在其中水平和/或垂直滚动??。) This approach is great but has one main drawback: since the height of the document is exactly the same as the browser viewport, the mobile browser will not hide the address bar/navigation menu .(这种方法很好，但有一个主要缺点： 由于文档的高度与浏览器视口完全相同，因此移动浏览器不会隐藏地址栏/导航菜单 。) There are numerous hacks and viewport properties that enable us to get more screen real estate, but none are quite as effective as minimal-ui (introduced in iOS 7.1).(有许多hacks和视口属性使我们能够获得更多的屏幕空间，但没有一个像minimal-ui （在iOS 7.1中引入）那样有效。) News came yesterday that iOS 8 beta4 had removed minimal-ui from Mobile Safari (see Webkit section in iOS 8 Release Notes ), which left us wondering:(昨天有消息称iOS 8 beta4已从Mobile Safari中移除了minimal-ui （参见iOS 8发行说明中的 Webkit部分），这让我们感到奇怪：) Q1.(Q1。) Is it still possible to hide the address bar on Mobile Safari?(是否仍然可以隐藏Mobile Safari上的地址栏？) As far as we know, iOS 7 no longer responds to the window.scrollTo hack, this suggests we have to live with the smaller screen space, unless we adopt a vertical layout or use mobile-web-app-capable .(据我们所知，iOS 7 不再响应 window.scrollTo hack，这表明我们必须使用较小的屏幕空间，除非我们采用垂直布局或使用支持mobile-web-app-capable 。) Q2.(Q2。) Is it still possible to have a similar soft fullscreen experience?(是否仍然可以获得类似的软全屏体验？) By soft fullscreen I really mean without using the mobile-web-app-capable meta tag.(通过软全屏我真的意味着不使用支持mobile-web-app-capable元标记。) Our web app is built to be accessible, any page can be bookmarked or shared using the native browser menu.(我们的Web应用程序可以访问，任何页面都可以使用本机浏览器菜单加入书签或共享。) By adding mobile-web-app-capable we prevent users from invoking such menu (when it's saved to homescreen), which confuses and antagonises users.(通过添加支持mobile-web-app-capable我们可以阻止用户调用此类菜单（当它保存到主屏幕时），这会混淆和对抗用户。) minimal-ui used to be the middle-ground, hiding the menu by default but keeping it accessible with a tap -- though Apple might have removed it due to other accessibility concerns (such as users not knowing where to tap to activate the menu).(minimal-ui曾经是中间地带，默认隐藏菜单但是可以通过点击访问它 - 虽然Apple可能已经删除它，因为其他可访问性问题（例如用户不知道点击激活菜单的位置） 。) Q3.(Q3。) Is a fullscreen experience worth the trouble?(全屏体验值得一试吗？) It would seem that a fullscreen API is not coming to iOS anytime soon, but even if it is, I don't see how the menu will be kept accessible (same goes for Chrome on Android).(似乎全屏API不会很快进入iOS，但即便如此，我也看不到菜单是如何保持可访问的（Android上的Chrome也是如此）。) In this case, maybe we should just leave mobile safari as it is, and account for viewport height (for iPhone 5+, it's 460 = 568 - 108, where 108 includes the OS bar, address bar and navigation menu; for iPhone 4 or older, it's 372).(在这种情况下，也许我们应该保持原样的移动游猎，并考虑视口高度（对于iPhone 5 +，它是460 = 568 - 108，其中108包括操作系统栏，地址栏和导航菜单;对于iPhone 4或年纪大了，它是372）。) Would love to hear some alternatives (besides building a native app).(很想听到一些替代方案（除了构建本机应用程序）。)   ask by bitinn translate from so

Answer 1

The minimal-ui viewport property is no longer supported in iOS 8. However, the minimal-ui itself is not gone.(iOS 8中不再支持 minimal-ui viewport属性。但是，minimal-ui本身并没有消失。)

User can enter the minimal-ui with a "touch-drag down" gesture.(用户可以通过“触摸 - 向下拖动”手势输入minimal-ui。) There are several pre-conditions and obstacles to manage the view state, eg for minimal-ui to work, there has to be enough content to enable user to scroll;(管理视图状态有几个先决条件和障碍，例如，对于最小化工作，必须有足够的内容使用户能够滚动;) for minimal-ui to persist, window scroll must be offset on page load and after orientation change.(要使minimal-ui保持不变，窗口滚动必须在页面加载和方向更改后偏移。) However, there is no way of calculating the dimensions of the minimal-ui using the screen variable, and thus no way of telling when user is in the minimal-ui in advance.(但是， 没有办法使用screen变量计算minimal-ui的尺寸 ，因此无法预先知道用户何时处于minimal-ui。) These observations is a result of research as part of developing Brim – view manager for iOS 8 .(这些观察结果是研究结果，是开发iOS 8的Brim视图管理器的一部分。) The end implementation works in the following way:(最终实现以下列方式工作：) When page is loaded, Brim will create a treadmill element.(当页面加载时，Brim将创建一个跑步机元素。) Treadmill element is used to give user space to scroll.(Treadmill元素用于为用户提供滚动空间。) 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.(跑步机元件的存在确保用户可以进入最小ui视图，并且如果用户重新加载页面或改变设备方向，它将继续存在。) It is invisible to the user the entire time.(它在整个时间内对用户是不可见的。) This element has ID brim-treadmill .(这个元素有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).(在加载页面或更改方向后，Brim正在使用Scream来检测页面是否在minimal-ui视图中（以前在minimal-ui中已经重新加载的页面将保留在minimal-ui中，如果内容高度为大于视口高度）。) 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).(当页面在minimal-ui中时，Brim将禁用文档的滚动（它以安全的方式执行此操作，不会影响主元素的内容）。) Disabling document scrolling prevents accidentally leaving the minimal-ui when scrolling upwards.(禁用文档滚动可防止在向上滚动时意外地离开minimal-ui。) As per the original iOS 7.1 spec, tapping the top bar brings back the rest of the chrome.(根据最初的iOS 7.1规范，点击顶部栏可以恢复其余的镀铬。) The end result looks like this:(最终结果如下：) For the sake of documentation, and in case you prefer to write your own implementation, it is worth noting that you cannot use Scream to detect if device is in minimal-ui straight after the orientationchange event because window dimensions do not reflect the new orientation until the rotation animation has ended.(为了便于记录，如果您更喜欢编写自己的实现，值得注意的是，在orientationchange事件之后，您不能使用Scream来检测设备是否在minimal-ui中，因为window尺寸不会反映新的方向，直到旋转动画已结束。) You have to attach a listener to the orientationchangeend event.(您必须将一个侦听器附加到orientationchangeend事件。) Scream and orientationchangeend have been developed as part of this project.(作为该项目的一部分，已经开发了尖叫和定向 变换 。)