Safari runs on multiple operating systems and devices. All versions of Safari—Safari on the desktop and Safari on iPhone OS—use the same WebKit engine. Therefore, web content intended for the desktop might work well on devices running iPhone OS without any modifications. Some differences exist, however, so at a minimum you should ensure that your webpages are compatible with Safari on iPhone OS. Next, you might optimize your webpages for iPhone OS simply as a convenience to the user. For example, ensure that your webpages work over Wi-Fi, 3G, and EDGE, scale correctly when rendered, and contain media that is viewable on iPhone OS. There are also a few modifications you can make for specific devices such as iPad. Finally, you might build custom web applications for either platform that look and behave like native applications.
Safari on the desktop is the Safari application that runs on Mac OS X and Windows. It is a full-featured web browser for the desktop that supports industry standards as well as many WebKit extensions. In addition, it includes a number of tools that developers can use to analyze, test, and debug websites and web applications.
Safari on iPhone OS, the application for browsing the web on devices such as iPhone, iPod touch, and iPad, is also 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.
The WebKit 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. WebKit 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 WebKit as an embedded browser. You can use the UIWebView class in UIKit on iPhone OS to embed a web browser in an native iPhone application.
In addition to providing browser functionality, WebKit also implements some extensions to HTML, CSS, and JavaScript, including several specific to Safari. Safari extensions include CSS animation and transform properties, and JavaScript database support. Safari on iPhone OS includes JavaScript multitouch event support. Some extensions are fully supported on both platforms and others are not. Check reference documents for specific availability of those features you want to use.
This document teaches you how to create web content compatible with Safari running on any platform and how to separate your iPhone OS-specific web content from your other web content so that when you optimize your web content for iPhone OS, it still works on the desktop and other browsers. This document also covers some basics on tailoring web applications for iPhone OS.
iPhone OS Note: Safari on iPhone OS behaves the same on different devices except when the user taps links to iPhone-only applications. Read Apple URL Scheme Reference for information on the links that behave differently on other devices. On iPad, the behavior of HTML5 media elements is similar to the desktop. Read Safari HTML5 Audio and Video Guide for the differences on iPad.
You should read this document if you want your web content to look good and perform well on either the desktop or iPhone OS, plan to write iPhone OS-specific web content, use iPhone OS-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 either platform.
iPhone OS Note: Also read iPhone Human Interface Guidelines for Web Applications, a companion document, which describes how Safari on iPhone OS behaves and contains metrics and tips on designing user interfaces for iPhone OS. Understanding how Safari on iPhone OS 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.
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 OS.
This chapter covers the first steps you need to follow to optimize web content for Safari:
“Optimizing Web Content” describes how to detect Safari on different platforms and use conditional Cascading Style Sheets (CSS) so that you can begin optimizing web content for iPhone OS.
These chapters describe different ways to optimize web content for iPhone OS:
“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.
“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 multiple platforms:
“Creating Video” explains how to create video content for playback on iPhone OS in general, including video content embedded in your webpages.
This chapter covers information on how to store data locally:
“Storing Data on the Client” describes how to use the HTML5 application cache for storing resources locally.
This chapter covers information on how to debug web content:
“Debugging” describes the Safari on iPhone OS console which 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.
There are a variety of other resources for Safari web content developers in the ADC Reference Library.
If you are creating an iPhone OS web application, then you should also read:
iPhone Human Interface Guidelines for Web Applications, which provides user interface guidelines for designing webpages and web applications for Safari on iPhone OS.
Apple URL Scheme Reference, which describes how to use the Phone, Mail, Text, YouTube, iTunes, and Maps applications from your webpages.
If you want to learn more about visual effects, then you should read:
Safari CSS Visual Effects Guide, which describes how to use the CSS visual effects properties including the transition, animation, and transforms properties. It also covers the JavaScript APIs for handling visual effects events.
If you want to embed video and audio in your webpages read:
Safari HTML5 Audio and Video Guide, which describes how to use the HTML5 audio and video elements in your webpages.
If you want to learn more about JavaScript multi-touch event support, then you should read:
Safari DOM Additions Reference, which describes DOM extensions including touch event classes that you use to handle multi-touch gestures in JavaScript on iPhone OS.
If you want to learn more about JavaScript database support, then you should read:
Safari Client-Side Storage and Offline Applications Programming Guide, which describes a simple relational database that you can use to store persistent data in JavaScript that cannot be stored in cookies.
If you want to use the JavaScript media APIs, then you should read:
JavaScript Scripting Guide for QuickTime, which describes how to use JavaScript to query and control the QuickTime plug-in directly.
If you want to learn more about what HyperText Markup Language (HTML) tags and Cascading Style Sheets (CSS) properties are supported in Safari, then read:
Safari HTML Reference, which describes the HTML elements and attributes supported by various Safari and WebKit applications.
Safari CSS Reference, which describes the CSS properties supported by various Safari and WebKit applications.
If you are using JavaScript and want access to the DOM or use the canvas object, then read:
WebKit DOM Programming Topics, which describes how to use JavaScript in web content for WebKit-based applications.
WebKit DOM Reference, which describes the API for accessing WebKit's Document Object Model.
If you are developing web content for Safari on the desktop and iPhone OS, then you should read:
Safari User Guide for Web Developers, which describes how to use the Debug menu in Safari.
Dashcode User Guide, which describes how to use Dashcode to create web applications.
If you want to embed a browser in your iPhone OS application, then read:
UIWebView Class Reference for a description of the UIWebView class.
If you want to learn more about WebKit or contribute to the open source project, then go to The WebKit Open Source Project.
If you want to read the WebKit W3C proposals, then go to: http://www.webkit.org/specs.
Last updated: 2010-03-24