Use iOS-Specific Meta Tags in HTML5

In HTML5, you can include meta tags specific to iOS (Apple’s operating system for the iPhone, iPod touch, and iPad). These tags enable you to control how your site appears or how your users interact with it via the touchscreen on an iPhone or iPad.

If a visitor arrives at your site using a device that doesn’t support these features, the browser simply ignores them. Here’s a quick introduction to the iOS-specific tags:

  • viewport — When you visit most web pages on an iPhone or iPad, you can pan around the page and zoom by using pinch and stretch finger gestures to shrink or enlarge the page and its contents. This feature helps make websites that were designed for desktop computer screens possible to read on the smaller screen on an iPhone.

    However, if you’ve optimized your design for these devices in the first place, you may want to prevent users from panning and zooming because it’s unnecessary and may confuse them.

    To block the pan and zoom features on a page that you’ve designed to perfectly fit the iPhone or iPad screen, use the meta viewport tag, which sets the window to the width of itself and prevents scaling:

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

    This viewport meta tag setting is best used if your site is designed to fit perfectly on the small iPhone screen. If your site isn’t optimized for small screens, it’s best not to use this meta tag because you’ll want to allow visitors to enlarge sections of the page and scroll around as necessary to read your content.

  • apple-mobile-web-app-capable — This meta tag tells the Safari browser that it doesn’t need to have the navigation options at the top and bottom of the screen on the iPhone or iPod touch. It also removes the navigation options at the top of the iPad screen.

    This feature doesn’t work the first time someone visits a website. It works only if a visitor to your site has bookmarked the page by saving a Web Clip icon. When someone uses the link from the Web Clip icon to visit your site, this meta tag hides the navigation.

    <meta name="apple-mobile-web-app-capable" content="yes" />

    If you choose to use this tag, you must ensure that your site doesn’t need the typical navigation options that the browser provides. When you remove the bars at the top and bottom of the iPhone and iPad, you gain some valuable real estate for your designs, but you lose the back and forward arrows and other navigation features built into these devices.

    If you use this option, make sure your website includes navigation elements to help visitors move through your website.

  • apple-mobile-web-app-status-bar-style — The default style of the toolbar on an iPhone or iPad is opaque black. If you want to change the style of the status bar to a translucent black, you can use yet another iOS-specific meta tag. This meta tag also works only if the user visits a website via the link from a Web Clip icon.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

If you remove both of the interface bars and set the status bar to translucent, you have an extra 124 horizontal pixel lines of screen real estate in Safari on the iPhone and iPod touch. That’s over 25 percent more room on the small screen! A translucent black status bar also allows content of the page to flow underneath the status bar.

blog comments powered by Disqus
Advertisement
Learning anything is easy with For Dummies eLearning!

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.