How to fit your website for the Apple iPad

Important note, updated: Apple has released very limited 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.

Screenshot of the NYT website

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.

City of Helsinki website screenshot

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.

19 comments

  1. I stumbled upon the first comprehensive explanation of several methodologies of how to make an iPad Website or Web App. It covers caching, Flash image swap, lightview popup, and all you need to know about building or porting a website for iPad.

    http://www.combsconsulting.com/ipad-website-example/

  2. Hey, great tip! Very nice way to target Mobile Safari easily.

    Had some initial trouble but noticed that your example missing a closing parenthesis after “max-device-width: 1024px”. Once you add that and then copy the code, it works beautifully.

  3. Thanks for the heads-up! I added the missing parenthesis.

  4. Thanks for the tip! Definitely have to incorporate this.

  5. 960px would have been a much more sensible choice … given that’s what most grid layouts are based on.

    I’d suggest just adding the extra 20px in the form of padding to ensure consistency across all platforms (and to follow convention)

  6. Hey thanks for the tips, I was actually guessing if the real size for the iPad will also be to respect the 980px and as someone else says if you develop for 960px just add the 20 as a padding.

  7. Great article…perfect as our office iPad is on its way to us. YAAHHHh! A good web designer should always be aware of different platforms their site maybe viewed on.

  8. Thank you. This article was very informative. I found it when I was researching for my article “Preparing Your Site for the iPad.” http://www.messagingnews.com/onmessage/ben-gross/preparing-your-site-ipad. I recommend it and listed it in the references for the article.

  9. u. This article was very informative. I found it when I was researching for my article

  10. Very useful – i was wondering how i could learn about this and a timely tweet answered that.

    Thanks!

  11. Great article, thanks for sharing your tips about designing for different platforms for less headaches further down the line.