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

前端之家收集整理的这篇文章主要介绍了html – iPad和状态栏上的iOS 11全屏网络应用程序问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个全屏主屏幕网络应用程序,专为1024×768分辨率设计,因此它在横向模式下完美适合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”会解决这个问题,这会导致状态栏透明并“漂浮”在HTML上方而不是将其推下来.

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

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

解决方法

在iOS 11上,更改方向后所有样式都以横向模式中断,
你选择了一个你想要的人.

在方向更改时,他们在顶部或底部添加一个栏:

新装(默认,黑色和黑色半透明):

顶部间距为黑色或默认白色:

底部间距为黑色半透明,为粉红色背景颜色:

iPhone SE,iOS 11,Full Album,Code

猜你在找的HTML相关文章