CODEWITHSUNDEEP
htmlweb-applicationsprogressive-web-appsstatusbarmeta
SebScoFr
SebScoFr

Reputation: 901

apple-mobile-web-app-status-bar-style on iPhone 11

According to the apple developer guidelines for web apps (found here), there are 3 choices for the status bar in a web app; default, black and black-translucent.

I'm trying to implement the default behavior, sadly I just end up with a black bar with white text. I have initially opened the app in Safari, then clicked Add to home screen, then this is what I see when opening the resulting "app" on the home screen:

enter image description here

For reference here is what my HTML looks like:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="mobile-wep-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

My manifest.json includes this:

"display" : "fullscreen"

Is this something to do with the iPhone 11? I'm expecting the status bar to have a white background and black text.

Upvotes: 1

Views: 4309

Answers (1)

SebScoFr
SebScoFr

Reputation: 901

After several hours of pulling my hair off on this, I've discovered that dark mode in iOS 13 was to blame.

Going to Settings > Display & Brightness and switching back to Light mode fixes it.

Upvotes: 4

Related Questions