<zhead>
Meta tags

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

Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode.

Parameters

default
The normal status bar appearance.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
black
A black status bar above the web content.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
A translucent black status bar over the web content.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
export type AppleMobileWebAppStatusBarStyle =
     /**
   * The normal status bar appearance.
  **/
    'default'
    /**
   * A black status bar above the web content.
  **/
    'black'
    /**
   * A translucent black status bar over the web content.
  **/
    'black-translucent'

Code examples

Good example
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Uses the normal status bar. This is also the default value.
Good example
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Uses a black status bar with content laid out below it.
Good example
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Extends web content across the screen beneath a translucent black status bar.
Avoid this example
<meta name="apple-mobile-web-app-status-bar-style" content="blue">
Not one of Apple’s three documented values.
Avoid this example
<meta name="apple-mobile-web-app-status-bar-style" content="light">
A native UIKit style name is not valid for this HTML meta element.

Recommendations

  • 01
    Enable Standalone Mode First
    This property has no effect unless apple-mobile-web-app-capable is set to yes.
  • 02
    Protect the Safe Area
    With black-translucent, content extends beneath the status bar. Keep text and controls clear of the inset.

Related documentation

Related meta tags

apple-itunes-app

name

Adds Apple’s Smart App Banner in Safari. The banner opens the installed app or its App Store page.

<meta name="apple-itunes-app" content="app-id=123456789">
The required parameter with a numeric App Store ID.

apple-mobile-web-app-capable

name

Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA.

<meta name="apple-mobile-web-app-capable" content="yes">
The only value that enables this legacy standalone mode.

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

name

Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode.

<meta name="apple-mobile-web-app-status-bar-style" content="default">
Uses the normal status bar. This is also the default value.

apple-mobile-web-app-title

name

Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title.

<meta name="apple-mobile-web-app-title" content="MyApp">
A short Home Screen title.

mobile-web-app-capable

name

Deprecated pre-manifest hint once used by Chrome for Android to launch a Home Screen site without browser controls. Use a web app manifest today.

<meta name="mobile-web-app-capable" content="yes">
The historical value that requested standalone app mode.