Optimizing Web Content

The first step in optimizing web content for iOS is to separate your iOS-specific content from your desktop content and the next step is to tailor the web content for iOS. You might want to follow these steps even if iOS is not your target platform so your web content is more maintainable in the future.

Use conditional CSS so that you can create iOS-specific style sheets as described in “Using Conditional CSS.” You can also use object detection and WebKit detection as described in “Follow Good Web Design Practices” to use extensions but remain browser-independent. Only if necessary, use the user agent string as described in “Using the Safari User Agent String” to detect Safari on iOS or a specific device.

After optimizing your content, read the rest of the chapters in this document to learn how to set viewport properties, adjust text size, lay out forms, handle events, use application links, and export media for iOS. Finally read“Debugging” for how to debug your webpages.

Using Conditional CSS

Once you use CSS to lay out your webpage in columns, you can use conditional CSS to create different layouts for specific platforms and mobile devices. Using CSS3 media queries, you can add iOS-specific style sheets to your webpage without affecting how your webpages are rendered on other platforms.

For example, Figure 2-1 shows a webpage containing conditional CSS specifically for iOS. Figure 2-2 shows the same webpage rendered on the desktop.

CSS3 recognizes several media types, including print, handheld, and screen. iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.

To specify a style sheet that is just for iOS without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iOS style sheet. Use max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone and iPod touch, use an expression similar to the following:

480px)" href="small-device.css" type= "text/css" rel="stylesheet">

To specify a style sheet for devices other than iOS, use an expression similar to the following:

481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

Alternatively, you can use this format inside a CSS block in an HTML file, or in an external CSS file:

@media screen and (min-device-width: 481px) { ... }

Here are some examples of CSS3 media-specific style sheets where you might provide a different style for screen and print. Listing 2-1 displays white text on dark gray background for the screen. Listing 2-2 displays black text on white background and hides navigation for print.

Listing 2-1 Screen-specific style sheet

@media screen {

        #text { color: white; background-color: black; }

Listing 2-2 Print-specific style sheet

@media print {

        #text { color: black; background-color: white; }

        #nav  { display: none; }

For more information on media queries, see: http://www.w3.org/TR/css3-mediaqueries/.

Using the Safari User Agent String

A browser sends a special string, called a user agent, to websites to identify itself. The web server, or JavaScript in the downloaded webpage, detects the client’s identity and can modify its behavior accordingly. In the simplest case, the user agent string includes an application name—for example, Navigator as the application name and 6.0 as the version. Safari on the desktop and Safari on iOS have their own user agent strings, too.

The Safari user agent string for iOS is similar to the user agent string for Safari on the desktop except for two additions: It contains a platform name and the mobile version number. The device name is contained in the platform name. For example, you can detect iOS and the specific device such as iPad. Typically, you do not send iPhone-specific web content to an iPad since it has a much larger screen. Note that the version numbers in this string are subject to change over time as new versions of iOS become available, so any code that checks the user agent string should not rely on version numbers.

For example, Listing 2-3 shows the user agent string for an iPhone running iOS 2.0 and later, where the string XXXX is replaced with the build number.

Listing 2-3 iPhone running on iOS 2.0 user agent string

Mozilla/5.0 (iPhone; U; CPU iOS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20

The parts of the Safari on iOS user agent string are as follows:

(iPhone; U; CPU iOS 2_0 like Mac OS X; en-us): The platform string. iPhone is replaced with iPod when running on an iPod touch and iPad when running on an iPad.
AppleWebKit/525.18.1: The WebKit engine build number.
Version/3.1.1: The Safari family version.
Mobile/XXXXX: The mobile version number, where XXXX is the build number.
Safari/525.20: The Safari build number.

For example, the user agent string for an iPod touch contains iPod in the platform name as shown in Listing 2-4.

Listing 2-4 iPod touch running iOS 1.1.3 user agent string

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

The user agent string for an iPad contains iPad in the platform name as shown in Listing 2-5.

Listing 2-5 iPad running iOS 3.2 user agent string

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Note that the user agent string is slightly different for earlier Safari on iOS releases. Listing 2-6 shows the user agent string for an iPhone running iOS 1.1.4 and earlier. Note that the platform string does not contain the iOS version number.

Listing 2-6 iPhone running iOS 1.0 user agent string

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

Typically, you use the WebKit build number to test for supported WebKit HTML tags and CSS properties. The Safari family version, or marketing version, is included in the user agent string for Safari on the desktop, too. Therefore, you can use it to track usage statistics across all Safari platforms.

Go to these websites to learn more about other recommended techniques for detecting Safari and WebKit: