Game Development Reference
In-Depth Information
Listing 12-9. The Meta Tags Used To Optimize iOS Home Screen Apps
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
The first tag, apple-mobile-web-app-capable , will display your app in full screen when launched from the
home screen. Not supplying this tag will result in your app simply launching in the Safari browser. The second tag,
apple-mobile-web-app-status-bar-style , specifies the style that the status bar will be displayed in. In this example,
the background color will be black.
Creating a Home Screen App Icon
The icon on the home screen will, by default, be a screenshot of the web page. However, you can specify the icon that
will be used. Listing 12-10 shows a series of link tags that are used to specify the icon image.
Listing 12-10. The link Tags to Set the Fakezee Icons
<!-- iOS 7 iPad (retina) -->
<link href="webapp/apple-touch-icon-152x152.png"
sizes="152x152"
rel="apple-touch-icon">
<!-- iOS 6 iPad (retina) -->
<link href="webapp/apple-touch-icon-144x144.png"
sizes="144x144"
rel="apple-touch-icon">
<!-- iOS 7 iPhone (retina) -->
<link href="webapp/apple-touch-icon-120x120.png"
sizes="120x120"
rel="apple-touch-icon">
<!-- iOS 6 iPhone (retina) -->
<link href="webapp/apple-touch-icon-114x114.png"
sizes="114x114"
rel="apple-touch-icon">
<!-- iOS 7 iPad -->
<link href="webapp/apple-touch-icon-76x76.png"
sizes="76x76"
rel="apple-touch-icon">
<!-- iOS 6 iPad -->
<link href="webapp/apple-touch-icon-72x72.png"
sizes="72x72"
rel="apple-touch-icon">
<!-- iOS 6 iPhone -->
<link href="webapp/apple-touch-icon-57x57.png"
sizes="57x57"
rel="apple-touch-icon">
 
Search WWH ::




Custom Search