iPad和状态栏上的iOS 11全屏网络应用程序问题

Question

我有一个全屏主屏幕网络应用程序,专为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

Answer 1

在 iOS 11 上，更改方向后，所有样式都会在横向模式下中断，
并且您可以选择要使用的样式。

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

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

顶部间距为black或default白色：

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

iPhone SE，iOS 11，完整专辑，代码