iPhone Compatibility Tips

This article describes how you can use CSS rules and simple HTML changes to make your Web site more compatible with the Web browser in the iPhone and iPod Touch. Topics include what image formats and file formats are supported, controlling site magnification, how to create links to iPhone's built-in applications, and creating a custom Web Clip icon.

iPhone Compatibility

The iPhone has a built-in version of the Safari Web browser. One of the best things about the iPhone is that it allows Web sites to be viewed in Safari without any special modifications. However, there are some simple steps you can take to ensure the best compatibility with Safari. Taking these steps can greatly enhance iPhone users' experience of your Web site without requiring you to change anything for desktop users.

Everything in this tip can be applied to either the iPhone or the iPod Touch. We'll mention only the iPhone to save space.

All of the information in this tip is gleaned by Apple presentations and the information on their developer Web site. You can access the developer Web site with a free Apple Developer Connection account.

https://developer.apple.com/iphone/devcenter/

Basic Compatibility

The first step to ensuring compatibility of your site with iPhone is to make sure your site works great in Safari. Safari is the most popular Web browser on Macintosh and is also available on Windows for testing purposes.

http://www.apple.com/safari/

Your site will render much the same in Safari on iPhone as it does on the desktop. Safari has good standards compliance so in general using clean HTML/XHTML and CSS design will ensure that your site looks good. Safari has full support for JavaScript and AJAX techniques.

Since the iPhone user will often be viewing the site over the EDGE cellular network you should make sure that you have optimized your images. Don't serve large images and scale them with height and width attributes. Instead, serve images scaled appropriately for where they will be displayed. Although your images should be much smaller than this in general, all images must in any case be less than 10MB in size. GIF, PNG, and TIFF images must have dimensions height x width less than about 2 million. JPEGs must have dimensions height * width less than about 32 million.

HTML, CSS, and JavaScript files should be served separately when possible so they can be cached by the browser. These files should be optimized to the best extent possible. Compression like mod_gzip or deflate can be used.

PDF files can be viewed on the iPhone. Cookie are supported. HTTPS and SSL encryption is fully supported.

Since the visitor is using a finger to navigate the page they don't have nearly as much precision as a mouse. Tightly packed links might be difficult for the visitor to click on, resulting in inadvertant clicks or the user having to magnify the page before clicking. If possible, try to provide reasonable spacing between links and buttons so users can select one confidently.

What's Not Supported

Flash is not supported so you should ensure that your Web site can be viewed without it. If your site relies heavily on Flash then you might need to code an iPhone specific interface. At the very least you should try to detect Flash and redirect to an appropriate page, rather than leaving the browser at an empty page with a broken icon.

Java is not supported on the iPhone. If your site relies on downloadable Java applets these will not work at all on the iPhone.

Some JavaScript behaviors are not supported including mouse-over events, hover styles, and tool tips. The window.showModalDialog() or window.print() functions are not supported. However, alert() and confirm() work fine. Window open calls are supported, but the iPhone can only have eight open windows. Dialog box style windows should be avoided since they don't really fit in with the iPhone interface.

Page Layout

Safari on the iPhone supports some optional tags which allow you to specify how the layout will be viewed on the iPhone.

If you need to adjust your stylesheets you can check for the string "iPhone" or "iPod" in the [Client_Browser] tag.

Viewport Controls

Since the iPhone screen is so small, visitors will frequently need to magnify portions of it to view the content of your site. The iPhone will automatically allow magnification by default, but you can control the default, maximum, and minimum magnification with the viewport controls.

The following meta tag can be specified in the head of your HTML document. The properties of the meta tag should be specified as shown using commas between individual properties. The possible properties are listed below.

<meta name="viewport" content="initial-scale=2.0, minimum-scale=.5, maximum-scale=8.0" />

 

• width - The width of the virtual screen for the iPhone. By default Safari renders pages as if the screen was 980 pixels wide and then scales the page to fit within the actual screen width of 320 portrait or 480 landscape. For example, if you view a site in landscape mode, by default it will be rendered at 50% size (.5 scale). In general you will either set the width or the initial-scale option. Valid values are from 200 to 10,000.
• height - The height of the virtual screen for the iPhone. This is normally calculated auotmatically. Valid values are from 223 to 10,000.
• initial-scale - The initial scale for the page. By default the initial scale will be about 0.3 for portrait or 0.5 for landscape. Changing the width will affect the initial-scale. In general you will either set the width or the initial-scale option. Setting this to 1.0 will scale the page at full size by default.
• minimum-scale - The minimum magnification for the page. The default is 0.25. Valid values are from about 0.1 to 10.
• maximum-scale - The maximum magnification for the page. The default value is 1.6. Valid values are from about 0.1 to 10.
• user-scalable - Allows scaling to be turned off altogether. This can be done if your page is formatted special for the iPhone. Valid values are yes or no.

Double Tap

When the user double taps on a page element Safari attempts to scale that element to fill the screen. Double tapping on an image will change the scale until the image fills the screen. Double tapping on a div or table cell will change the scale so that element fills the screen. When zoomed in, another double tap will return the user to the previous scale.

Designing for double tap means ensuring that your page has block-level elements that surround content the user might want to tap. If your text is formatted in columns then it will be easier for the user to zoom in and scroll vertically through them.

The maximum-scale can be used to constrain the user from zooming in too closely on table cells and other elements.

Forms

Safari on the iPhone handles forms fine, but the available screen real estate can make it difficult to see graphic elements which are around your form elements. Also, form elements like select lists are formatted using on-screen controls. The CSS and graphic layout of forms will be largely ignored on the iPhone so you should make sure your form inputs are properly named and that your form is sufficiently self explanatory for iPhone users.

Application Integration

Safari on the iPhone will automatically link some special URLs to the built-in applications.

Phone Numbers

Phone numbers can be linked using a tel: prefix in a normal anchor tag. When the iPhone user taps on the phone number they will be asked to confirm they want to dial the number.

<a href="tel:1-800-555-1212"> 1-800-555-1212 </a>

 

Email Addresses

Email addresses are handled automatically. When the iPhone user taps on the email address they will be taken to the Mail application to send a message.

<a href="mailto:documentation@lassosoft.com"> documentation@lassosoft.com </a>

 

Google Maps

Google map links are automatically intercepted. When the iPhone user taps on a Google map link the built-in Maps application is launched with the specified location or with driving directions.

<a href="http://maps.google.com/maps?q=Chicago, IL"> Map of Chicago, Illinois </a>

 

There are many optional parameters which can be added to the link. See the Google Maps Web site for more information. This link will provide driving directions from Belleuve, Washington to Chicago, Illinois.

<a href="http://maps.google.com/maps?daddr=Bellevue, WA&saddr=Chicago, IL"> Directions </a>

 

YouTube Videos

YouTube videos cannot normally be viewed on the iPhone in Safari since Flash is not supported, but they can be viewed through the built-in YouTube application. YouTube video links are automatically intercepted. When the iPhone user taps on a YouTube video link the built-in YouTube application is launched with the specified video.

<a href="http://www.youtube.com/watch?v=vCS4e_NgGew"> Depeche Mode - Precious Music Video </a>

 

Web Clip Icon

A recent iPhone update brought the ability to save Web pages as "Web Clips" which are displayed on the iPhone home screen as if they were true applications. Normally a small snapshot of your page will be used as the Web Clip icon, but you can provide a custom icon as follows.

Create a 57x57 pixel PNG graphic. Your graphic will automatically be made "glassy" so you don't need to worry about creating rounded corners or anything. Link to the graphic using a link tag in the head of your page.

<link rel="apple-touch-icon" href="/custom_icon.png" />

 

More Information

All of the information in this tip is gleaned by Apple presentations and the information on their developer Web site. You can access the developer Web site with a free Apple Developer Connection account.

https://developer.apple.com/iphone/devcenter/

Author: Fletcher Sandbeck
Created: 22 Feb 2008
Last Modified: 3 Mar 2011