在iOS5上的html5主屏幕應用程序中更改屏幕方向問題11

Question

當在移動web應用程序上將方向從縱向更改爲橫向時（使用meta「apple-mobile-web-app-capable」從主屏幕圖標），屏幕頂部會出現一個黑條，將內容向下推。

重現步驟： 1.一旦添加了書籤，在縱向模式下從主屏幕圖標啓動Web應用程序。 2.在任何時候，將方向切換到橫向。 3.屏幕頂部的黑色欄將按下視口內容。

之後，會出現黑條，導致應用程序不再是全屏。

我嘗試使用視口適合封面或包含在元標記，但沒有發生任何事情。

由於

Answer 1

的IOS 11不是特定分辨率取決於所用的設備的真實標準。你必須爲每一個想要的設備添加一些媒體查詢：https://en.wikipedia.org/wiki/List_of_common_resolutions

現在你必須定位你想要的東西：只需使用CSS添加一些新的尺寸（肖像風景）。

打開媒體查詢@media添加屬性與目標和方向，我們可以在這種情況下使用新的特定屬性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"; 
    } 
}