Home » Tutorials » Mobile Web Development » Viewport Meta Tag For Mobile Devices

Viewport Meta Tag For Mobile Devices

Viewport Meta Tag For Mobile Devices

  • Stumble it!
  • Share

Introduction to Viewport Meta Tag

Nowadays, the new generations of mobile browsers can render full web pages (desktop version) without any problems and scale them to fit nicely inside the mobile browser’s visible viewport. The user then can zoom in on areas of interest and pan around on the page using touch, or keypad that depending on the mobile devices. This may not sounds user-friendly for mobile users, because if the web page loaded is wider than 320px (see Figure 1), everything in the page were too small to read without zooming.

Figure 1
Figure 1

Now, we have a solution to solve it by telling the mobile browsers to render the page according to the mobile devices using “viewport meta tag“.

The Viewport Syntax

In order to define mobile’s viewport, you have to include a viewport meta tag in the <head> section of your HTML document as shown below:

<meta name="viewport" content="width=320">

Example above shows you the basic syntax of defining a viewport. This setting will make the browser render the page on a device’s screen with a width of 320px, and then fit it nicely in the screen area (see Figure 2). If the screen size is over 320px wide, then the page will be scaled up (see Figure 2-1).

Figure 2 Figure 2-1
Figure 2, Figure 2-1

Specifying the screen size in viewport meta tag may not a great enough, so we recommended you to set the viewport width to be equal to the width of the device’s screen:

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

This setting will force mobile browser to render the page as wide as screen size without any scaling.

Besides, the width parameter that we mentioned above, there are few more parameters available in viewport meta tag such as:

Viewport height:
Similar to the width property, there is also a corresponding one for height settings. You can use it with specific pixel values, or with device-height.

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

Initial scale:
The initial zoom factor for the viewing area. You can set the initial zoom in by default.

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

Scaling constraints:
By using the “maximum-scale” and “minimum-scale” settings, you can constrain how much user can zoom in / out your web page.

<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5">

In addition, you can also disable the zooming function by defining “user-scalable”.

<meta name="viewport" content="width=device-width, user-scalable=no">

Viewport Meta Tag in High-DPI Screen

Most of the recent generation of mobile devices (mostly Android devices) comes with various densities of dpi(dot per inch), such as high-dpi, this makes it almost impossible to distinguish individual pixels and renders objects shown on the screen with very high fidelity. This problem was cause your page appear larger on the lower density screen and smaller on the higher density screen. In order to solve the problem, you need the help of “target-densitydpi” setting in your viewport meta tag.

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

The “target-densitydpi” allows you to specify the target density for which the web page is designed, using the following values:

  • device-dpi: Use the device’s native dpi as the target dpi. Default scaling never occurs.
  • high-dpi: Use hdpi as the target dpi. Medium and low density screens scale down as appropriate.
  • medium-dpi: Use mdpi as the target dpi. High density screens scale up and low density screens scale down. This is also the default behavior.
  • low-dpi: Use ldpi as the target dpi. Medium and high density screens scale up as appropriate.

Conclusion

Viewport meta tag is important in developing a mobile-optimized website, play around with these settings, and let us know what combination works best for you!


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Launch Native iOS Google Maps Via Your Web App
  • Speed Up Page Loads Time Using Prefetch / Prerender

  • Aha

    Hi ,I would like to invite you Join Smartphone & Tablets Biz Board-(STBB) .http://www.linkedin.com/groups?about=&gid=3999517

    thanks

    fonfay Wong

    • http://www.onlywebpro.com onlyWebPro

      Hi Aha,

      Thanks for the invitation. Please keep in touch.

      Regards
      The Management of onlyWebPro.com

  • Lisa Taliana

    I use this Viewport Meta Tag for my site, because devices such as iPhone 4 have a greater resolution and found this one worked best.

    I use the viewport tags in conjunction with media queries to call different stylesheets for different devices, ie. tablets.

    • Quan

      me too with http://shopmobi.vn

    • App Developer

      Did you have any page or content loading issues with too many style sheets?

      • http://www.onlywebpro.com onlyWebPro

        Shouldn’t have any issues with too many style sheets in conjunction with viewport meta tag.

  • http://www.kayz.in/ software development

    May I use this tag in ASP.NET. Please Suggest me

  • Mobi
Android, iOS Development Tutorials