HTML and CSS Reference
In-Depth Information
A second meta tag can make your app look more like a regular app when it launches. Mobile Safari uses a
light gray status bar by default, but you can switch it to the standard black status bar by adding another meta
tag:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Your options for the content of this meta tag are
"default"
that means to leave it gray;
"black"
that
as described previously makes it the standard black status bar used by apps that leave the status bar on; and
"black-translucent"
that pushes your content up to the top of the page but leaves the status bar as semi-
transparent over your content. For most cases,
"black"
is the best option unless you want a full 480 × 320
pixel area to play with, in which case you can use
"black-translucent"
.
Adding a Startup Image
Apple gives you an additional option to improve the launch experience when your app is on the home screen.
This is the startup image that displays while the device gets your app up and running. You can add a
<link>
tag to your
<head>
to specify this. First, create a 320 × 460 pixel image in portrait orientation, and then add a
meta tag linking to that image:
<link rel="apple-touch-startup-image" href="/path/to/
320x460-startup-image.png">
If you want to support more than just than a low-res iPhone version, you can add a complete set of startup
images for the iPhone and iPhone 4+ Retina display along with the iPad in portrait and landscape mode by
adding the appropriate media query to each of the links:
<!-- 320x460 for iPhone before iPhone 4 and iPod Touch -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px)
and
not (-webkit-min-device-pixel-ratio: 2)" href="/path/to/
320x460-startup-
image.png" />
<!-- 640x920 for Retina display on iPhone 4 and above-->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px)
and
(-webkit-min-device-pixel-ratio: 2)" href="/path/to/640x920-startup-
image.png" />
<!-- 768x1004 for iPad in Portrait mode -->
<link rel="apple-touch-startup-image" media="(max-device-width: 1024px)
and
(orientation: portrait)" href="/path/to/768x1004-startup-image.png" />
<!-- 1024x748 for iPad in Landscape mode. Image should be rotated 90
degrees clockwise. -->
<link rel="apple-touch-startup-image" media="(max-device-width: 1024px)
and
(orientation: landscape)" href="/path/to/1024x748-startup-image.png" />
