Meta tag Viewport is used to adapt the site to all devices and sets the rules for displaying the visible area in a mobile browser. To activate a tag, you need to add it to the Head section of the page code, setting the necessary parameters.
What does the viewport tag mean?
Viewport is an area on the device screen that is visible to the user without scrolling the screen. Imagine a page that normally displays on a laptop screen. Letters, icons and other elements are in optimal size, it is convenient for you to read the text.
The same page on the smartphone turns out to be quite inconvenient for reading. You have to move images and text right and left, down and up. If you set the Viewport tag, the web page will look:
On the image on the left, the page is displayed without the Viewport tag, and on the right with its help the display parameters are set. The option on the left is not convenient for reading, so the user will quickly leave such a site.
With an adaptive design, it will be more convenient for him to read the text, make purchases and navigate between sections of the site. In order for a web page to display normally on devices with different resolutions, it is important to set the correct settings for the Viewport tag.
Viewport tag settings for different devices
In most cases, the line with the Viewport tag looks like this:
The first parameter Width instructs the browser to adapt the width of the page to the device on which it is open. Page width scaling is determined automatically if “device-width” is specified. You can also set a numeric value from 200 to 10,000 pixels. In this case, the parameter will look like this:
In this case, the screen layout can not be less than 800 pixels in width. If this value is larger, the browser will stretch the visible area to full scale. The need to use Viewport came after the active distribution of high-resolution smartphones. In them, even sites adapted for mobile devices are not always displayed correctly.
For example, take for comparison two smartphones with a diagonal of 3.5 inches, but with different pixel densities. In the first, this figure is up to 200 pixels, and in the second – more than 300 pixels. The same web page will look different on both smartphones, despite the same screen size.
In the first smartphone, the page will be displayed normally and will be easy to read, like on a computer monitor. In the second case, due to the increased pixel density, the text will appear twice as small. To bring the page into a normal view, its scale must be doubled. Meta tag Viewport can be used for adaptive and non-adaptive versions of sites.
Another parameter – initial-scale – means the scaling factor. If the value is “1”, the resolution of the CSS and the devices are equal to each other, regardless of the screen size. You can specify any parameter value from 0.1 to 10.
How to determine the screen resolution of a particular device?
By pixel density. If the index is less than 200 pixels, the screen resolution will be equal to the actual one (CSS coefficient = 1). If the density is more than 200, but less than 300 pixels – the resolution will be 1.5 times less than the actual (coefficient CSS = 1.5). At a density of more than 300 pixels, the resolution is determined by the formula:
density indicator / 150 rounded to the nearest whole number
For example, in the Galaxy S3 smartphone, the pixel density indicator is 233, and the screen resolution is 480×800. In this case, the coefficient CSS = 1,5. This means that the actual resolution will be 1.5 times less than the specified one and will be 320×533 pixels.
In the more modern Galaxy S5, the pixel density is 441, and the screen resolution is 1080×1920. Since the density is more than 300, you need to divide 441 by 150, after rounding it will turn out 3. The final expansion is 360×640.
Where to register tag Viewport?
In the Head section of each page that needs to be scaled to fit the screen resolution. In addition to the width and scaling factor, you can use additional parameters:
- height – sets the height of the area displayed for viewing. You can specify the device-hight constant, which means automatic scaling to fit the screen, or a numeric value from 200 to 10,000 pixels;
- user-scalable – allows or denies custom page scaling, set to Yes or No;
- minimum-scale — minimum scale value (from 0.1 to 10);
- maximum-scale – the maximum value of the scale (from 0.1 to 10).
In practice, it looks like this:
In this case, the user will not be able to manually scale the screen, and the maximum scale is equal to its actual value.
Not all versions of mobile browsers support the Viewport tag. Opera Mobile Mini, Symbian, Openwave, and some other versions of older browsers do not respond to Viewport commands. In this case, the optimization of the site for mobile devices can be carried out using an older method, namely through meta tags:
You can set the Viewport tag on WordPress sites without writing any code manually. To do this, you need to download and install the appropriate plugin.
Conclusion
The Viewport tag is used to optimize sites for mobile devices. It allows you to adapt the size of the visible area of the page to the screen of the visitor’s device.
The most optimal value is the automatic scaling of the page width to fit the screen. You can also set the page height, zoom factor, enable or disable manually enlarge / reduce the screen.
To activate the meta tag, you need to add a line with the necessary parameters to the Head section of each page of the site or install the appropriate plug-in for your CMS.
