Important note: Apple has not released any information about the iPad at the Safari Dev Center. This article is written on the assumption that previous guidelines for Safari on iPhone OS apply to version 3.2 and the iPad.
Step 0: Design for 980 pixels and do nothing
The width of the iPad screen when held in portrait orientation is 768 pixels. Since many pages (like the NYT, which Jobs has demoed) are wider than that, the iPad scales down pages.
The NYT website is automatically scaled down to fit on the iPad screen.
The default viewport width on the iPhone and presumably the iPad is 980 pixels. This means that pages are zoomed out until 980 pixels of horizontal content are visible. Text will wrap at 980 pixels, and elements wider than that will require horizontal scrolling.
If your site is designed to work at 980 pixels wide or slightly less, you probably don’t need to do anything. (Apart from not using Flash and the like, but we won’t go into that now.) The site will look all right, although a little bit small.
Step 1: Adjust your viewport settings
What if you don’t want automatic zooming? Perhaps your site is designed for a specific size, or maybe it flexes for different sizes. You’ll need to adjust the viewport settings with a meta tag.
The City of Helsinki site is narrower than 980 pixels, causing unnecessary margins. Adjusting the viewport fixes this.
The viewport meta tag was introduced by Apple for the iPhone, and it has since been picked up by Microsoft for Windows Mobile and Nokia for Maemo. The tag is ignored by regular desktop browsers.
<meta name="viewport" content="width=device-width" />
The above example essentially sets the zoom level to 100 percent. More specifically, it makes Safari scale content so that the number of visible pixels matches the screen width. This is useful for flexible layouts, but you’ll have to make sure your site flexes to both the iPhone and iPad (see step 2).
A little gotcha is that Safari always calculates device width based on the portrait orientation. If you rotate to landscape, the content is not reflowed, but scaled up to fit the wider screen.
<meta name="viewport" content="width=800" />
You can also set the width to a specific number to fit content designed for that size. For example, a site designed to be 800 pixels wide can be scaled to show that exact width.
Be careful with using a number, however. If you set the number to 320 for the iPhone, the iPad will most likely obey this and scale your content way up.
<meta name="viewport" content="width=device-width, user-scalable=no" />
Adding user-scalable=no disables the pinch-to-zoom feature. This is useful for preventing accidental zooms and makes web apps feel more app-like. Still, consider if there’s something your users might want to see at a larger size.
Step 2: Make it flex
If you use the device-width keyword, you have to deal with greatly differing screen sizes. CSS media queries to the rescue.
CSS media queries allow you to specify completely different stylesheets depending on how large the screen is. You can have one stylesheet for the iPhone and other mobile devices, one for the iPad, one for desktops and so on.
An old CSS trick is to also include a print stylesheet, eliminating the need for a separate printer-friendly page.
<link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"> <link media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" href="medium.css" type="text/css" rel="stylesheet"> <link media="screen and (min-device-width: 1025px)" href="large.css" type="text/css" rel="stylesheet"> <link media="print" href="print.css" type="text/css" rel="stylesheet">
The above example gives a page four stylesheets, which are automatically switched based on need. The only keyword prevents non-CSS3-compliant browsers from picking up the smaller styles, while starting with screen makes them use the large one.
If you don’t include any media keyword or use all, every device applies the stylesheet. This is useful for global styles you want for each device.
You don’t necessarily need to split your CSS into separate files. You can also use media queries inside a single stylesheet.
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px {
body{
//iPad body styles go here...
}
h1{
//iPad heading styles go here...
}
}
//Styles for all devices go here...
In the above manner, you can write exceptions for a single screen size inside an otherwise shared stylesheet.
For more information about Safari, see the Safari Dev Center.
In 2010, Microsoft launched an electronic reading revolution. A unified publishing platform that works on desktops, tablets and mobile devices, complete with crisp typesetting, inline annotations and support from major booksellers like Barnes & Noble.
I’m going to make an unusual prediction for the Apple Tablet: it’ll be a great platform for web apps. How do I know this? Because of what’s on the iPhone right now.
