Last update : June 24, 2014
Designing a webpage which looks good on desktop PC’s, mobile devices and tablet PC’s is challenging. You have to optimize your content at least for screens that are 320px, 480px, 768px, and 1024px wide. One tool to reach this goal is the viewport 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, by Nokia for Maemo and by Android. Remember however that the viewport has nothing to do with the device. The viewport is the browser and more precisely the window of the browser. Recently the W3C published a draft of a CSS Device Adaptation based on the viewport meta tag.
The tag is ignored by regular desktop browsers.
<meta name="viewport" content="width=800" />
Mobile Safari presents desktop-sized websites on small screens by rendering to a virtual browser screen that is 980 pixels wide. Opera assumes a page to be 850 pixels wide. Pages on the iPad in portrait mode and on other mobile devices are scaled down. Pages can be zoomed and panned. Viewport tags tell the Mobile Safari that the website displays properly narrower than 980 pixels. The webpage can be set for other scaling preferences.
Apple suggests to avoid hard-coding a width for the viewport and to use the physical device-width to set the viewport :
<meta name="viewport" content="width=device-width" />
This setting makes one CSS pixel equal to one device pixel. The physical device-width refers to the screen size in portrait mode. One problem is that the content is blowed up if the device is oriented in landscape mode. To avoid blow-up, a maximum scale factor can be applied :
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
You can add the attribute “user-scalable=no” to disable the pinch-to-zoom feature :
<meta name="viewport" content="width=device-width, user-scalable=no" />
This is useful for preventing accidental zooms and makes web apps feel more app-like, but most users might want to see the content at a larger size.
The complete list of viewport properties for iPad (and iPhone with Retina display) is given below :
- width : 200 – 10.000 ; default : 980
- height : 223 – 10.000
- minimum-scale : 0.0 – 10.0 ; default : 0.25
- maximum scale : 0.0 – 10.0 ; default : 1.6
- initial-scale : between min and max
- user-scalable : yes / no ; default : yes
To hide the control-bar which consumes about 60 pixels, the following script can be used :
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>
To deal with the greatly differing screen sizes, CSS media queries allow to specify completely different stylesheets depending on how large the screen is.
<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">
Instead of using separate css-files, the media query can be used inside a single css-file :
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
{
styles
}
In fact it’s useful to consider two viewports : one based on device pixels, the other based on CSS pixels. Only at zoom level 100% one CSS pixel is exactly equal to one device pixel.
The iPhone 4’s Retina display has a far larger physical pixel density than previous iPhones. Still, it reports 320px for the device-width media query (as well as JavaScript screen.width) both with and without the meta viewport width=device-width.
A few links about useful tutorials about viewports and other related subjects are listed herafter :
The next list shows links to iPad and iPhone simulators to test the rendering of webpages on these devices :
