Setup Viewport Pages

Setup Viewport Pages

Understanding Viewport

A Viewport help users see the web content properly on different sized screens such as mobile devices or tablets. It’s basically a meta viewport tag which gives browser instructions on how to control the page’s dimensions and scaling. This way a site becomes responsive to multiple platforms.

responsive_web_design

How to configure the Viewport?

Setting up viewport is very simple. There is a small snippet of code Google recommends to add as a meta tag for a responsive website.

<meta name=viewport content=”width=device-width, initial-scale=1″>

The viewport metatag details:

  • width=device-width – It sets the width of the page equal to the size of the screen the site is shown
  • initial-scale=1 – It basically scales the size as per the value you have, normally for standard sites it is 1 while you can zoom out as well via using values such as 0.5 (Will show half of the size) or any other till 1.

How to check your viewport

To check whether your page is configured for viewport tag correctly, you can simply view source the page and then search for the tag with name=viewport