ello,
I run (latest stable) iOS 12.1 on iPhone SE. I'm working on an web app (that uses the "Add to Home Screen" action). However I'm unable to get clean screen estate in landscape. It's all fine in portrait but rotating the device to landscape causes having blank status bar displayed. When starting web app from landscape the bar is not present.
I'm quite new to iOS but that behavior doesn't seem quite right. I tried lots of option (including proper PWA manifest) but nothing helps. Even sites like Twitter or Instagram behave like this. Isn't it a bug?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width">
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
<div>Hello world!</div>
</body>
</html>
This is the example I tried (on Simulator). It displays fine on iPhone XR but blank status bar in landscape on phones like iPhone 8 (or my real iPhone SE).
Screenshots: https://imgur.com/a/63begNM
EDIT: I'm working around this using something like this but it doesn't let me have black status bar text on white background:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<div style="width: 100%; height: env(safe-area-inset-top); background-color: gray; position: fixed; "></div>
<div style="padding-top: env(safe-area-inset-top); ">Hello world!</div>
</body>
</html>
