Introduction to Safari Web Content Guide for iPhone

Safari on iPhone, the application for browsing the web on iPhone and iPod touch, is a full web browser running on a small handheld device with a high-resolution screen. This unique implementation of Safari responds to a finger as the input device and supports gestures for zooming and panning. It also renders webpages in portrait or landscape orientation. It contains many built-in features such as PDF viewing, video playback, and support for links to the native Phone, Mail, Maps, and YouTube applications.

Because Safari on iPhone uses the same web engine as Safari on the desktop, your webpages might work well on iPhone without any modifications. Some differences exist, however, so at a minimum you should ensure that your webpages are compatible with Safari on iPhone. Next, you might optimize your webpages for iPhone simply as a convenience to the user. For example, ensure that your webpages work over both Wi-Fi and EDGE, scale correctly when rendered, and contain media that is viewable on iPhone. Finally, you might build custom web applications for iPhone that look and behave like native applications.

All Safari web browsers use the same Web Kit engine. The Web Kit is an open source project as well as a framework in Mac OS X that lets developers embed a web browser in their Cocoa applications. The Web Kit has a JavaScript and Objective-C interface to access the Document Object Model (DOM) of a webpage. Dashboard, Mail, and many other Mac OS X applications also use the Web Kit as an embedded browser.

In addition to providing browser functionality, the Web Kit also implements some extensions to HTML, CSS, and JavaScript including several specific to Safari on iPhone. This document teaches you how to separate your iPhone-specific web content from your other web content so that when you optimize your web content for iPhone, it still works on the desktop and other browsers. This document also covers some basics on tailoring web applications for iPhone.

Note: Safari on iPhone behaves the same on iPhone and iPod touch except when the user taps links to iPhone-only applications. Read “Using iPhone Application Links” for information on the links that behave differently on iPod touch.

Who Should Read This Document

You should read this document if you want your web content to look good and perform well on iPhone, if you plan to write iPhone-specific web content, use iPhone-specific style sheets, or use iPhone application links in your web content. Definitely read this document if you are creating a custom web application for iPhone.

Also read iPhone Human Interface Guidelines, a companion document, which describes how Safari on iPhone behaves and contains metrics and tips on designing user interfaces for iPhone. Understanding how Safari on iPhone presents web content to the user and how the user can zoom, pan, and double tap on your webpages are prerequisites for reading this document.

Organization of This Document

This chapter covers important information that you should read first:

“Creating Compatible Web Content” provides guidelines for creating web content that is compatible with Safari on the desktop and Safari on iPhone.

This chapter covers the first steps you need to follow to optimize web content for iPhone:

“Optimizing Web Content” describes how to detect Safari on iPhone and use conditional Cascading Style Sheets (CSS) so that you can begin optimizing web content for iPhone.

These chapters describe different ways to optimize web content for iPhone:

“Configuring the Viewport” explains how to use the viewport tag to control the layout of your webpages.

“Customizing Style Sheets” covers how to adjust the text size when zooming and how to control highlighting using CSS.

“Using iPhone Application Links” describes how to use the Phone, Mail, and Maps applications from your webpages.

“Designing Forms” explains how to lay out forms, design custom form controls, and turn auto correction and capitalization on and off.

“Handling Events” provides information on what events you can handle in JavaScript.

This chapter describes how to create video content for iPhone:

“Creating Video” explains how to create video content for playback on iPhone in general including video content embedded in your webpages.

This chapter covers information on how to debug web content:

“Debugging” describes the Safari on iPhone console that you use to help test and debug your webpages.

If you are new to web development, read these appendixes that provide introductions to HTML and CSS:

“HTML Basics” provides an overview on how to create structured HTML web content.

“CSS Basics” describes how to add style sheets to existing HTML web content.

Introduction to Safari Web Content Guide for iPhone

Contents:

Who Should Read This Document

Organization of This Document

See Also