Click here to Skip to main content
14,430,765 members

Using the Viewport Meta Tag

Rate this:
5.00 (1 vote)
Please Sign up or sign in to vote.
5.00 (1 vote)
24 Jul 2011CPOL
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:


The view is not so good since the blog is squeezed and it doesn’t look nice 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 don’t support it!

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


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 many more options which are:

  • widthwidth 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.
  • heightheight 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 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.


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.


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


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:

Comments and Discussions

Newsviewport Pin
Member 145748521-Sep-19 22:46
MemberMember 145748521-Sep-19 22:46 
QuestionWhat is the best viewport Meta Tag to use to cover most of the smartphones Pin
Member 1034804420-Oct-13 12:59
MemberMember 1034804420-Oct-13 12:59 
GeneralExcellent research Pin
Brian Lowe29-Jul-11 12:41
MemberBrian Lowe29-Jul-11 12:41 

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

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

Posted 24 Jul 2011

Tagged as


3 bookmarked