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 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 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.
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.
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.
Using JavaScript for iPhone and iPad Orientation
The meta tags shown above work very well, however, you can also use JavaScript to do the same thing, since both the iPad and iPhone support the scripting language. The following JavaScript function detects and sets the device’s viewport orientation by using the innerWidth property of the window object and setting the orient attribute of the body element regularly (in this case every 4 seconds):
Using CSS for iPhone and iPad Orientation
Another method that you can use to your advantage is using Cascading Style Sheets (CSS). Obviously, you will need a style sheet that is devoted to portrait use, and another for landscape use. We will cover the creation of such style sheets in a future article, but for now you need to know how you will use them. It’s as simple as adding a link to your style sheets within your HEAD tag:
Source: X7 Labs & others