In our last tutorial we showed you how to use CSS for iPhone and iPad layouts. This week we’re going to show you a few more HTML tags you can use in your iDevice web development arsenal: iPhone meta tags, splash screens and icons.
Url and Button Bar Meta Tags
The iPhone uses the Safari web browser, so that’s what we’re going to focus on here. When the browser is opened, the URL bar appears at the top and the button bar appears at the bottom. When anyone visits your page from an iPhone, this is what they will see by default, as shown on Apple’s Safari page:
To make the URL and button bars disappear, add this meta tag to the <head> of your document:
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Can I Change the Appearance of the iPhone’s Status Bar?
The iPhone’s status bar appears at the very top of the iPhone, and is a standard feature that appears when one is using Safari. It can, however, be distracting, and although you can’t make it disappear, you can change the color of it to black, the default, which is white, or make it translucent. You do this using another meta tag, like this:
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
The values that you can change for content are default (white), black and black-translucent.
How Can I Prevent Users From Scaling (Pinching) My Website?
On the iPhone, if you make the gesture known as “pinching” while you are on a website or web app, it zooms in. iPhone applications don’t do that, and you may not want users to zoom in on your website either–especially if you’ve taken the trouble to design a website that fits perfectly on the iPhone with maximum readability in mind. To prevent users from doing that, there is another meta tag you can use:
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
How Can I Create An Icon for My Bookmarked Website?
When users are browsing the web via Safari on the iPhone, they can press “+” and “Add to Home Screen” to create an icon that will appear on their home screen (Apple calls these icons “Web Clips”). It will open up your website in Safari the next time the user selects the icon. Instead of the default bookmark icon, you can specify an image that the iPhone will use when it creates the “bookmark” icon on the user’s home screen by using a link reference tag:
<link rel=”apple-touch-icon” href=”bookmark-icon.png” />
In order to create a home screen icon, you will need to create a 57 x 57 pixel .png file, and use that in the tag shown above. If you are creating a site for the iPad, the image size will need to be 72×72 pixels. Like the others in this article, the tag goes within the <head> section of your HTML document. The iPhone adds a glossy appearance to the icon, but if you don’t want it, you can change the rel information to apple-touch-icon-precomposed in the link shown above.
How Can I Create a Splash Screen for My iPhone Website?
When you are developing websites for the iPhone OS, similar to native applications, developers are able to specify a startup image, or splash screen, that is displayed while the website is launched. It appears on the device as shown in this image which shows a startup image from Google on an iPhone:
You can create your own startup image by creating a 320×460 .png file, and then add a link to it in the <head> of your HTML document like this:
<link rel=”apple-touch-startup-image” href=”splash_screen.png” />
Keep in mind that the image size must be specifically 320×460 pixels, or the iPhone will ignore it entirely. If you are creating a startup image for the iPad, which works the same way, the startup image must be 1004×768.
As you can see, the creation of a website for the iPhone (or iPad) requires the use of specific tags to make it look professional and take advantage of the features that the devices provide to web developers. Our next article will return to iPhone and iPad CSS, and we will get even deeper into the creation of your iDevice-ready website.
