title: apple-mobile-web-app-status-bar-style on iPhone 11
body: <p>According to the apple developer guidelines for web apps (<a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html" rel="nofollow noreferrer">found here</a>), there are 3 choices for the status bar in a web app; default, black and black-translucent.</p>
  
  <ul>
  <li>Default results in a white status bar with black text</li>
  <li>Black results in a black status bar with white text</li>
  <li>Black-translucent results in a transparent background with white text</li>
  </ul>
  
  <p>I'm trying to implement the <strong>default</strong> 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:</p>
  
  <p><a href="https://i.stack.imgur.com/q70gW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q70gW.jpg" alt="enter image description here"></a></p>
  
  <p>For reference here is what my HTML looks like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;meta name="mobile-wep-app-capable" content="yes"&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="default"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"&gt;
  </code></pre>
  
  <p>My manifest.json includes this:</p>
  
  <pre><code>"display" : "fullscreen"
  </code></pre>
  
  <p>Is this something to do with the iPhone 11? I'm expecting the status bar to have a white background and black text.</p>