• JavaScript Kit
• Free JavaScripts
• JavaScript tutorials
• JavaScript Reference
• DOM Reference
• DHTML & CSS
• Web Design
• Free Java Applets
• CSS Quick Reference
• JavaScript Forums

• CSS Drive
• JavaScript Menus
• CSS codes & examples
• Build a website
• Software Geek

The viewport meta tag- the key to preparing a page for mobile devices optimization

If you test out CSS media queries on a mobile device, you most likely won't see the expected media queries applied initially. There's nothing wrong with your syntax, it's just that your mobile browser thinks it's a desktop browser until someone clues it in. By default mobile devices such as iPhone or Android zoom out on webpages automatically when they are viewed to give the user a more expansive view of the page, meaning everything appears smaller, but also, more pixels are squeezed onto the screen. On iPhone devices, up to 980 pixels of a webpage are shown, and on Android devices, 800 pixels. The benefit of this is that it makes regular, non-mobile optimized webpages appear manageable on this small screen (which is the majority right now), instead of requiring the user to swipe half a mile in which ever direction to view various sections of the page. However, if your page is optimized for mobile devices (via CSS media queries and changing the layout of webpages accordingly), then all of a sudden this "zoom out" behaviour only gets in the way and defeats our efforts. It means that our CSS media queries will match the dimensions of the "zoomed out" device's, and not its actual (ie: 980px for device-width on the iPhone instead of 320px). So whenever you're optimizing a webpage for mobile devices, the first step is to define a particular META tag on your page to alter/ disable the "zoom in" behaviour of mobile browsers, and that's with:

<meta name="viewport" content="width=device-width">

The above, called the viewport meta tag, lets you modify the "virtual viewport" of the mobile device to something different than the default, which is to zoom out on a webpage so its entire contents are visible on the screen. In the above, we're telling the mobile device to display the page without any zooming, so how much the device is able to fit on the screen is what's shown initially. We want this because we'll be using CSS media queries to cater our webpage to the available real estate on different devices, and not the other way around.

Figure 1: JK homepage with NO "viewport" meta tag. Notice how the mobile browser zooms outs on the page, pretending it's a desktop browser.

Figure 2: JK homepage with "viewport" meta tag and its width set to "device-width". No automatic zooming out.

The viewport meta tag supports a handful of other properties for the "content" attribute:

When optimizing a webpage for mobile devices, the first step is to add the viewport meta tag to the HEAD section of your page, so that mobile devices refrain from making changes to the zoom level of the webpage unilaterally. In most cases you'll simply want to set the meta tag's content property to "width=device-width", so that no scaling of the page occurs at all, and your CSS media queries will return the actual dimensions of the device, not the "zoomed out" version's. To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape and visa versa, you can also throw in an initial-scale and maximum-scale property and limit both of them to 1:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

After that, you can get to work with changing your page's layout depending on the device's dimensions, CSS pixel density, and more. Where to take things is up to you and your design sense!

• Introduction to CSS media queries
• width versus device-width
• The viewport meta tag- the key to preparing a page for mobile devices optimization

End of Tutorial