Mar 17, 2014

How does a viewport metatag improve an existing website for mobile devices?

At a meeting today, we were talking about developing a more mobile friendly website to reflect the way people are actually accessing websites today. There were I thought were some good suggestions, such as eliminating remaining Flash content. One suggestion was to “use a viewport [could have been “viewpoint”] metatag and call it a day.” I didn’t want to ask about it at the time since that's not my department's repsonsibility, but what does simply adding a viewport metatag do that would make an existing site better for mobile devices?

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). "

A viewport metatag does improve the experience for mobile visitors to your website. It does so by improving the layout by displaying the site through a rectangular window, or “viewpoint.” By adding the viewport metatag, you tell the mobile browser to automatically size the page to the width of the screen, adjusting zoom as needed, including when the device is changed from landscape to portrait. 


Here are more details about it from Mozilla, if you want to learn more.


Answer this