apple-mobile-web-app-status-bar-style in ios 10

html ios web-applications statusbar meta
Brad picture Brad · Sep 28, 2016 · Viewed 28.8k times · Source

I know this question has been asked previously, just want to know if this is still the case in ios 10 (and ios 9)...

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.

  1. Default results in a white status bar with black text,
  2. Black results in a black status bar with white text, and
  3. Black-translucent results in a transparent background with white text. Additionally, this status bar floats above your content, meaning you have to push your content down 20px in order to not have the content overlap with thte status bar text.

I'd really like to use the black-translucent status bar (as I think it looks more native), but the background of my page is a light grey. This makes the white text on this status bar very hard to read.

Put simply, I'd just like a transparent background with black text (essentially, default-translucent). Is this possible?

Answer

Matt picture Matt · Nov 24, 2016

Unfortunately, No you cannot have black text on a transparent background.

I'm of the opinion that this will be added to the schema at some point and also find it a pain that you can't achieve this example right now. I guess in short the answer is design your faux app natively to achieve greater control of its behaviour and appearance.

Apple Documentation Supported Meta Tags

content="default"

Default apple-mobile-web-app-status-bar-style

content="black"

enter image description here

content="black-translucent"

enter image description here

Related questions

How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More
Camera access through browser

We are creating an HTML5 website for mobile and need to get camera access through the web browser without being a native app. We are having trouble making this work in iOS. Is anyone aware of a solution for this?

Read More