When it comes to optimizing web content for iOS, the first thing you should think about is separating your iOS-specific content from your desktop content. Once that has been taken care of, you will want to adapt your web content, even though iOS may not be your target platform. This way your web content will definitely be more maintainable in the future.

Make sure you use conditional CSS so that you can create iOS-specific style sheets, however, you can use object detection and WebKit detection as well, in order to remain browser-independent. After optimizing your content, you may also need to set viewport properties and adjust text size for iOS.

Using Conditional CSS

Once you use CSS to lay out your web page in columns, you can use conditional CSS to create different layouts for specific platforms and mobile devices. By using CSS3 media queries, on the other hand, you can add iOS-specific style sheets to your web page without worrying about how your websites will be rendered on other platforms. CSS3 does recognize several media types, including print, handheld, and screen, while iOS ignores print and handheld media queries as these types don’t supply high-end web content, which is why you will definitely want to use the screen media type query for iOS.

If you need to specify a stylesheet that is just for iOS (without affecting other devices), be sure to use the only keyword in combination with the screen keyword in your HTML file, since older browsers tend to ignore the only keyword and therefore won’t read your iOS style sheet. To describe the screen size, always use max-device-width and min-device-width.

Using the Safari User Agent String

In order to identify itself to websites, a browser uses a special string called a user agent. The web server or JavaScript (in the downloaded web page), is able to detects the client’s identity and then modify its behavior accordingly. The user agent string includes an application name and the number marking the current version (for example: “Navigator” as the application name, and “6.1” as the version).

Safari on the desktop and Safari on iOS have different (their own) user agent strings, as well. The Safari user agent string for iOS is actually quite similar to the one on the desktop, except that it has two main additions — it contains the name of the platform, as well as the mobile version number (with the device name contained in the platform name).

For instance, you can detect iOS and the specific device such as iPad, and you will not send iPhone-specific web content to an iPad due to iPad’s much larger screen. The numbers of the version are subject to change over time, as new iOS versions become available every once in a while. This is why any code that checks the user agent string should not rely on version numbers.

The Viewport

The viewport on the desktop and the viewport on iOS are a bit different. iOS Safari doesn’t have any windows, scroll bars, or resize buttons. The user pans by flicking a finger and zooms in by double-tapping and pinch opening, while zooming out is done by pinch closing (options that are not available for Safari on the desktop).

Due to the differences in the way users interact with web content, the viewports on the desktop and on iOS do differ. It is vital to note that these differences between the viewports may actually affect some of the HTML and CSS instructions on iOS. For Safari on iOS, the viewport is the area that determines the way in which content is laid out and where text wraps on the web page, though it can sometimes be larger or smaller than the visible area.

Just like the length scroll bars on the desktop, when the user pans a web page on iOS the gray bars will appear on the right and bottom sides of the screen as visual indicators which show the user the size of the visible area as compared to the viewport. As we already mentioned above, users can change the scale of the viewport via double-tapping or pinch-opening actions, and although the scale is changing, the size remains the same. There is an exception, however — when the user flips the portable device from portrait to landscape orientation, Safari on iOS is able to adjust the viewport’s width and height, thus changing the web page layout.

In order to improve the presentation of your website, you will need to set the viewport size and other properties of your web page the first time iOS renders the site. Safari on iOS sets the size and scale of the viewport to defaults, which will work well for most websites (this default width is usually 980 pixels), but bear in mind that these defaults may not work well for your pages, especially if you are setting up your site for a particular device. However, as Safari on iOS provides a viewport, you can change the default settings at any point.

Optimizing the Text Size

Aside from adjusting and controlling the viewport, you can also optimize the text size that Safari on iOS uses when rendering a block of text. Adjusting the text size is paramount if you want your text legible. When the user double-taps a HTML block element (like an element, for example), the Safari on iOS scales the viewport so it would fit the block width in the visible area. When Safari renders a web page for the first time, it gets the width of the text block and determines the right text scale so your text is legible on the user’s device. Should the automatic text size adjustment fail to work for your page, you can either turn this feature off, or specify your own scale manually in the form of a percentage.

Other pages may need a few small adjustments to make them look better. This is when we suggest using the -webkit-text-size-adjust CSS feature, as it works perfectly when it comes to changing the default settings for any element used to render text.