Click here to Skip to main content
Click here to Skip to main content
Go to top

Using the Viewport Meta Tag

, 24 Jul 2011
Rate this:
Please Sign up or sign in to vote.
The viewport meta tag enables web developers to indicate that the web page they built is optimized for mobile devices.

Many SmartPhone browsers support the viewport meta tag which controls the logical dimensions and scaling of the browser’s viewport window. In this post, I’m going to describe what is the viewport meta tag and how you can use it in your web pages.

Using the Viewport Meta Tag in my Blog

When I got my HTC HD7 SmartPhone, I wanted to see how my blog was looking in the SmartPhone’s browser. So I entered my blog’s address and this is how it was rendered in my phone:

WithoutViewport

The view is not so good since the blog is squeezed and it doesn’t look well at all. So I started to look for a solution and I found the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the SmartPhone browser’s window and tells it that the web page is optimized for mobile. You use the meta tag like in this example:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Pay attention that if you use this meta tag there are some SmartPhones that doesn’t support it!

Now my blog’s display will look like this in my mobile’s browser:

WithViewport

Since my blog is optimized only for desktop view (it is based on Community Server and the theme isn’t optimized for mobile display), the blog isn’t displayed so well either. So the experiment went wrong but I got to know the viewport meta tag. If you'll look at my blog in your mobile's browser, then you'll get the first display (with no viewport meta tag) which lets you scan my blog, zoom in and out when you find something interesting.

The Viewport Meta Tag Options

The demo shows only two properties of the viewport meta tag which are the width and initial-scale. There are much more options which are:

  • width – width of the viewport in pixels. It can also get the device-width (like in the previous example) value which indicates that the viewport should be the current device’s width.
  • height – height of the viewport in pixels. Like the width, it can get the device-height value to take the device’s height.
  • initial-scale – sets the the initial scaling of the viewport. The 1.0 value displays an unscaled web page.
  • user-scalable – specifies whether the user can scale the web page (zoom in or zoom out). Can get the yes or no values.
  • maximum-scale or minimum-scale – sets the maximum or minimum scaling for the web page. Can get values between 0.25 to 10.0.

Summary

The viewport meta tag enables web developers to indicate that the web page they built is optimized for mobile devices. Most of the new devices support it including iPhone, Android, WebOS, WP7’s Internet Explorer, and more. For further reading about the viewport meta tag, you can go to this link.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionWhat is the best viewport Meta Tag to use to cover most of the smartphones PinmemberMember 1034804420-Oct-13 11:59 
GeneralExcellent research PinmemberBrian Lowe29-Jul-11 11:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 24 Jul 2011
Article Copyright 2011 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid