Adding the tags is very simple.
index.html
head
tags, place the following meta tags:<meta name="viewport" content="width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
We added three meta
tags to our file to ensure the theme behaves as it should on mobile devices. Let's have a look at each:
viewport
meta tag is a Webkit requirement and not (yet) a W3C standard. The width
property controls the viewport. As we'll be styling our layout based on the screen size, we'll want this set to device-width
. apple-mobile-web-app-capable
meta tag to yes
, the site will run in full screen mode (when selected by the users), meaning it will bump the address bar up out of the screen view once the page has loaded. Even though this meta tag has the word apple
in it, it actually affects all Webkit-based browsers, so even Android devices should benefit from this tag.apple-mobile-web-app-status-bar-style
specifies the status bar settings. This setting changes the color of the bar and then moves it out of the way or allows it to stay up at the top. If we set it to default
it will stay its normal "iOS gradient-gray", but move up out of the way. We've changed to black
(the only color you're allowed to change it to).black-translucent
it would stay permanently over the top of the HTML content and be slightly transparent. If your users need access to the status bar while browsing the site, you might want to consider making this setting black-translucent
.