iOS 11上html5主屏幕应用程序更改屏幕方向的问题

Question

在移动网络应用程序中将方向从纵向更改为横向时（使用元“apple-mobile-web-app-capable” - 从主屏幕图标启动），屏幕顶部会出现一个黑条，推动内容下来。

重现步骤： 1.书签完成后，以纵向模式从主屏幕图标启动Web应用程序。 2.随时将方向切换为横向。 3.屏幕顶部的黑色条按下视口内容。

此后，会出现一个黑条，导致应用程序不再全屏显示。

我尝试使用视口适合封面或包含在元标记中，但没有任何反复发生。

由于

Answer 1

IOS 11 不是特定分辨率 的真实条件取决于所使用的设备 即可。您必须为每个想要的设备添加一些媒体查询：https://en.wikipedia.org/wiki/List_of_common_resolutions

现在你必须定位你想要的东西：只需使用CSS添加一些新的尺寸（纵向 - 横向）。

打开媒体查询@media add property with targetting和orientation，我们可以在新的特定属性CSS中使用这种情况。

@media only screen and (width : 603px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - chrome";
    }
}
@media only screen and (device-width : 1280px) and (orientation: landscape) {
    #device:after {
       content: "Nexus 7 - landscape - firefox";
    }
}