Apple posts iPhone Web development guidelines

Apple posts iPhone Web development guidelines

Ben Wilson
2 min read

Echoing much of what was said at the Worldwide developer conference earlier this last month, Apple has posted Web development guidelines for the iPhone to its Developer Connection Web site. The guidelines discuss the finger as an input device, laying out pages for the iPhone, what's supported in the iPhone's version of Safari, and pays special attention to writing tidy and vigorous JavaScript (as we noted earlier today, the iPhone is a sluggish JavaScript performer). Among the notable points:

  • Apple provides dimensions in pixels for controls including the status bar, URL text field, and keyboard. "[...] when the keyboard is not displayed, the height available for your web content is: 480 - 20 - 60 - 44 = 356. Therefore, you should design your content to fit within 320 x 356 pixels in portrait mode. If the keyboard is displayed, the available area is 320 x 140 pixels."
  • Links to telephone numbers use the tel: identifier
  • The iPhone supports:
    • HTML 4.01
    • XHTML 1.0
    • CSS 2.1 and partial CSS 3.xx
    • JavaScript 1.4, including DOM support
    • AJAX technologies, including XMLHTTPRequest

    The iPhone does not support:

    • window.showModalDialog()
    • Mouse-over events
    • Hover styles
    • Tool tips
    • Java applets
    • Flash
    • Plug-in installation
    • Custom x.509 certificates
  • On a double-tap, Safari on iPhone looks at the element that is double-tapped, and finds its closest block (e.g. DIV, OL, UL, TABLE) or the image element (IMG) and zooms in on it.
  • The Safari for iPhone user agent string is: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420 (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
  • You can specify an iPhone style sheet using the only and screen keywords.
  • Well-designed iPhone pages use the viewport tag to determine page width. The recommended viewport width for web applications is 320 pixels.
  • Image support includes GIF, PNG, TIFF and JPG.
  • Apple says "Make sure that the JavaScript you download is exactly what you need for the current page. Unneeded JavaScript consumes precious memory resources. Websites that have been in existence for some time often contain unused JavaScript; a quick audit of your site can help you free up memory resources and improve site performance."
Feedback? info@iphoneatlas.com.