问题
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
回答1:
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
来源：https://stackoverflow.com/questions/47063643/issue-with-ios-11-full-screen-web-app-on-ipad-and-the-status-bar