iPad 上的 iOS 11 全屏 Web 应用程序和状态栏出现问题答案

【问题标题】：Issue with iOS 11 full screen web app on iPad and the status bariPad 上的 iOS 11 全屏 Web 应用程序和状态栏出现问题
【发布时间】：2018-04-14 06:56:27
【问题描述】：

我有一个专为 1024x768 分辨率设计的全屏主屏幕网络应用程序，因此它非常适合横向模式下的 iPad。或者至少，在 iOS 11 之前它确实如此。这次更新现在在状态栏下呈现了内容，这将整个页面向下推了 20 个像素。我所涉及的元标记如下：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="initial-scale=1,user-scalable=no,viewport-fit=cover">

我的印象是“viewport-fit=cover”会解决这个问题，返回到 iOS 10 的行为，其中状态栏是透明的并且“浮动”在 HTML 上方而不是向下推。

有谁知道这是一个错误还是我做错了什么，所以我可以再次让它全屏显示并完美适配？

编辑：这似乎是 iOS 11 的一个错误，以及全屏网络应用程序的其他问题。 https://forums.developer.apple.com/message/268185

【问题讨论】：

你能找到解决这个问题的方法吗？
不。我确实向 Apple 提交了错误报告。也许如果更多的开发者也这样做，这个问题将在他们的优先级列表中上升。
这似乎是 iOS 11 中的一个已知错误。也请阅读 this。通过 JS 删除在 apple-mobile-web-app-status-bar-style 元标记上设置的 black-translucent 值可能会有所帮助（尚未尝试，手头没有配备 iOS 11 的物理 iPad）
我遇到了同样的错误，但升级到 iOS 12.1 后我的 PWA 现在可以正常工作了。我没有更改任何 PWA 设置。

标签： html ipad viewport ios11

【解决方案1】：

在 iOS 11 上，更改方向后，所有样式都会在横向模式下中断，
你已经选择了你想和哪一个住在一起。

在方向更改时，他们会在顶部或底部添加一个栏：

新加载（default、black 和 black-translucent）：

black 或 default 白色的顶部间距：

black-translucent 中的底部间距，为粉红色背景色：

iPhone SE、iOS 11、Full Album、Code

【讨论】：