在iPad和状态栏上发布iOS 11全屏Web应用程序 [英] Issue with iOS 11 full screen web app on iPad and the status bar

问题描述

我有一个全屏主屏幕网页应用程序，专为1024x768分辨率设计，因此它完美适用于横向模式下的iPad。或者至少，它的确如此，直到iOS 11.此更新现在在状态栏下呈现的内容将整个页面向下推动20个像素。我所涉及的meta标签如下：

 < meta name =apple-mobile-web-app-capable内容= 是 > 
< meta name =apple-mobile-web-app-status-bar-stylecontent =black-translucent> 
< meta name =viewportcontent =initial-scale = 1，user-scalable = no，viewport-fit = cover> 
  

我以为viewport-fit = cover会修复这个问题，回到iOS 10行为，状态栏是透明的，并在HTML上方漂浮而不是推下。

有人知道这是一个错误还是我正在做某事不正确的，所以我可以再次得到这个显示全屏和完美适合？

编辑：这似乎是与iOS 11的一个错误，与全屏Web应用程序的其他问题。 ，代码

I have a full screen home screen web app that is designed for 1024x768 resolution so it fits perfectly on the iPad in landscape mode. Or at least, it did, until the iOS 11. This update now has content rendered under the status bar which pushed the entire page down 20 pixels. My meta-tags involved are as follows:

<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">

I was under the impression that the "viewport-fit=cover" would fix this returning to the iOS 10 behavior where the status bar was transparent and "floated" above the HTML instead of pushing it down.

Does anyone know if this is a bug or if I am doing something incorrectly so I can once again get this to display full screen and fit perfectly?

Edit: This appears to be a bug with iOS 11, among other issues with fullscreen web apps. https://forums.developer.apple.com/message/268185

解决方案

On iOS 11 all styles break in landscape mode after you change the orientation,
and you have choose which one you want to live with.

On orientation changes they add either a bar on top or at the bottom:

Freshly loaded (default, black and black-translucent):

top spacing in black or default white:

bottom spacing in black-translucent, being the pink background color:

iPhone SE, iOS 11, Full Album, Code

这篇关于在iPad和状态栏上发布iOS 11全屏Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！