What is a Viewport meta tag and how to use it

Viewport is a displayed site area that is visible for mobile phone users before they start scrolling. Imagine a well-presented webpage on your laptop screen: it includes good-sized elements that ensure easy reading and comfortable navigation.

However, the same page will appear inconvenient on the screen of a mobile phone. To read the text, you will have to shift the displayed rendering left to right, up and down. To make the page look appropriately, you need to imply the Viewport tag:

The left picture shows a page with no implemented Viewport tag, while on the right we can see how it is displayed when this tag is applied. The left variant is inconvenient; visitors are most likely to prefer another site.

Adaptive design makes reading easy. Additionally, it provides comfortable online shopping and navigation between website sections. To make you website look appropriate on devices with different screen resolution, it is essential to set up Viewport tag parameters correctly.

In most cases the line with a Viewport tag will look the following way:

The Width parameter helps to adapt the page to the screen of the required device. With the identified "device-width" parameter measure scaling of the page will be defined automatically. You may also set a numerical value from 200 to 10000 pixels:

The code shows that the minimum allowed screen width is 800 pixels. In case this measure is bigger, the browser will stretch the display up to full scale. Wide use of modern smartphones with high-resolution screens has brought about a high demand for Viewport use. The reason is that sometimes mobile site versions fail to display correctly on this type of mobile devices.

Let us compare two smartphones both with 3,5 inch diagonal but different pixel density: 200 and 300. The same page will appear different on the two smartphones despite their identical display measures. The first device will provide a proper look of the page and comfortable reading as if it was a common computer monitor.

The second device will fail to display the site correctly due to its high resolution, so the text will appear too small. To normalize the display, it should be double scaled. Viewport meta tag is applicable to both adaptive and non-adaptive site versions.

Another important parameter is initial-scale which stands for the scaling coefficient. If the set value is "1", CSS will be fitted onto the display of the device despite its resolution. The value can be varied from 0,1 to 10.

Resolution relates to pixel density. If the value is defined between 200 and 300, then the resolution will be 1,5 times less than the original (CSS coefficient = 1,5). If the density is more than 300 pixels, the resolution can be estimated with this formula:

Galaxy S3 has a density of 233 pixels and 480x800 resolution. The coefficient for this model should be 1,5 (CSS=1,5). It means that the actual resolution will be 320x533 pixels that is half of the originally noted value.

The upper model Galaxy S5 has a density of 441 pixels and 1080x1920 resolution. Provided that the density is more than 300, we need to divide 441 by 150 which makes three if rounded. The resulting resolution is 360x640.

The tag should be implied in every page of your resource that needs to be scaled. Apart from the width and scaling coefficient, you can use additional parameters:

• height — arranges the height of the visible area. Type in a required value from 200 to 10000 pixels or use of the constant device-height value that allows to automatically scale the layout in order to fit into the screen display.
  
  
• user-scalable — allows or permits user page scaling; identifies by Yes or No.
  
  
• minimum-scale — minimum scale value (from 0,1 to 10);
  
  
• maximum-scale — maximum scale value (from 0,1 to 10).
  
  

Thus, the code will look the following way:

This keeps out the user from zooming the display manually. As for the maximal scale - it equals with the actual screen size.

Some mobile browsers do not support the use of Viewport tag. Opera Mobile Mini, Symbian, Openwave, and some other old browser versions do not react to Viewport tag commands. In this case, site optimization for mobile devices may be carried out by meta tags:

Applying Viewport tag to WordPress sites do not require manual implementation. Instead, you should use the plugin.

Viewport tag is used to optimize the mobile website version. It helps to adapt the visible area of a page to user devices.

The optimal way is to set the automatic scaling that fits the page onto the device screen. Also, you can manually set the page height, scale coefficient, allow or prohibit zooming the display.

Meta tag activation requires adding a string with correctly-arranged parameters to Head section of every page, or you can set a plugin which conforms your CMS.