<
zhead
>

Early Access

Meta Tags

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

Learn how to use the apple-mobile-web-app-status-bar-style meta tag to improve your site.

Specifies the style of the status bar for a web application when added to the homescreen of an iOS device. This meta tag influences the appearance of the status bar to either match the web app design or maintain the default iOS style.

Parameters

default
The default status bar appearance. Matches the standard iOS status bar style.
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
black
A black status bar that can blend well with dark-themed designs.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
black-translucent
A black, translucent status bar that allows the webpage content to show through; requires careful UI planning for legibility.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Code Examples

<meta name="apple-mobile-web-app-status-bar-style" content="default" />
Sets the status bar to the default iOS style, providing a consistent look with other applications on the device.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Sets the status bar to black, suitable for applications with a dark theme or a matching color scheme.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Makes the status bar black and translucent, allowing the web app's content to be visible beneath. Ideal for immersive applications but requires careful design consideration.
<meta name="apple-mobile-web-app-status-bar-style" content="blue" />
Incorrectly specifies "blue" as the value, which is not a supported option and will be ignored.
<meta name="apple-mobile-web-app-status-bar-style" content="" />
Leaves the value empty, resulting in the default status bar style being applied, potentially missing an opportunity to enhance the user experience.

Recommendations

  • Harmonize with Your Design
    Choose a status bar style that complements your web app’s design for a cohesive user experience. For a dark-themed web app, "black" or "black-translucent" can enhance the aesthetic appeal.
  • Consider Usability
    Using "black-translucent" can make the status bar text hard to read on light backgrounds. Ensure there is enough contrast between the status bar and the content underneath it.

Related Documentation

Related Meta Tags

apple-itunes-app

name

Promotes an iOS app on Apple’s App Store directly within the Safari browser. When added to a web page, it triggers a banner suggesting users to install the app.

<meta name="apple-itunes-app" content="app-id=123456789">
Correctly specifies the App Store ID for the app, directing users to the exact app in the store.

apple-mobile-web-app-capable

name

Specifies whether a web application runs in full-screen mode when added to the homescreen of an Apple device.

<meta name="apple-mobile-web-app-capable" content="yes">
Enables full-screen mode when the web app is added to the homescreen, providing a more app-like experience.

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

name

Specifies the style of the status bar for a web application when added to the homescreen of an iOS device. This meta tag influences the appearance of the status bar to either match the web app design or maintain the default iOS style.

<meta name="apple-mobile-web-app-status-bar-style" content="default">
Sets the status bar to the default iOS style, providing a consistent look with other applications on the device.

apple-mobile-web-app-title

name

Provides a custom title for a web application when added to the home screen on Apple iOS devices. This title appears below the app icon, offering more control over branding and user interface.

<meta name="apple-mobile-web-app-title" content="MyApp">
Specifying a concise and descriptive name such as "MyApp" ensures the title is readable at a glance and is easily recognizable by users.

mobile-web-app-capable

name

Indicates to mobile browsers that the website can be run as a standalone application when added to the user’s home screen, offering a more app-like user experience.

<meta name="mobile-web-app-capable" content="yes">
Tells the mobile browser to make the website available in a standalone mode.