Setting mobile browser meta viewport tag (Mobilizing websites with responsive design and HTML5 part 4)

Posted on by

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

By default, modern mobile browsers render websites in a “virtual screen” mode (viewport) where they allocate a virtual screen wide around 900 pixel for the webpage rendering. Then the users can pinch and zoom themselves around in this viewport. The default desktop-ish viewport in mobile browsers is for the legacy reasons; non-mobile aware legacy layouts would blow up if they were fitted into a small mobile screen estate.

Pinching and zooming around is not what we want to do – it makes the browsing experience constant pain of finding the start of the next paragraph. Setting a “normalized” viewport is the first thing you do when are mobilizing a website. This tells mobile browsers that the site is mobile browser aware and the mobile browser should use the actual mobile screen dimensions instead of virtual pan and zoom screen for rendering the web page.

This happens by settings a <meta name="viewport" > tag in HTML <head> section. The tag was introduced by Apple on iOS devices and has been later adapted by other Android, Opera, Firefox mobile browsers.

Here is an example:

<!--

    Set a mobile viewport which uses actual mobile screen dimensions instead of
    a virtual screen, but still allows user to zoom in for visual impairment

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

This viewport tag says that

  • Use device native screen width instead of virtual screen width
  • Set scale to 1 when the page is opened
  • Allow still the user to zoom in (maximum-scale=5). Some mobile site disable pan and zoom altogether of having maximum-scale=1, but this is not recommended as a lot of elderly people like to zoom into text even if the text is very large and optimized for small screens.

Before the viewport tag was applied:

After the viewport tag has been applied:

As you can see there is a clear difference in the page rendering, but this is not definitely enough to make the site look good on mobile: the CSS styles must be fixed also as usually legacy CSS styling uses  “min-width: 960px” or similar horizontally centered main column definition. Since we don’t have that 960 pixels in mobile screens, the layout cannot work properly yet. In the next tutorial blog post we’ll show how to fix this with CSS3 media queries and CSS overriding mechanism.

Note: As the viewport tag is not very standardized yet, there exist tons of pitfalls with it. Especially if you try to dynamically edit it with Javascript you’ll get undesirable results or no change. Always inject the viewport tag on the server-side into HTML payload.

Note: The viewport tag may affect iPad and Android tablets. The desktop browsers ignore it, though. Test your mobile site with the tablet devices also.

1. More information

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

9 thoughts on “Setting mobile browser meta viewport tag (Mobilizing websites with responsive design and HTML5 part 4)”

  2. I don’t understand your question, but on the other hand your mobile site is using and frames and the mobile site does not have viewport tag. Use HTML debugging tools like Firebug to figure this out. Frames have been bad web practice since 1998. Please write proper HTML pages for your mobile domain the tag included and it will work. If you are using any HTML design tools which cannot have proper HTML output please give up on them.

  3. Thanks for the info. I am definitely not great at code and am learning as I go. Thanks again.

  4. I believe it is your hosting solution which is potentially breaking your HTML code with something evil (bad FRAME redirects instead of proper HTTP proxying?). Try to switch to better hosting provider.

  8. I would like to point out that this above statement is very important : “Allow still the user to zoom in (maximum-scale=5). Some mobile site disable pan and zoom altogether of having maximum-scale=1, but this is not recommended as a lot of elderly people like to zoom into text even if the text is very large and optimized for small screens.”

    More and more sites are disabling the zoom-pinch feature and is is very, very, very frustrating, because in the past I could zoom in, read what was there, but now I just can’t. And nothing is more frustrating if something used to work just fine but now isn’t.

    I am on a quest to inform website builders to not use the maximum-scale=1 setting as it is very annoying.

    Thank you for listening.

Leave a Reply

Your email address will not be published. Required fields are marked *