Start Exploring Keyword Ideas

Use Serpstat to find the best keywords for your website

How-to 7 min read September 23, 2019

What is a Viewport meta tag and how to use it

Viewport meta tag is used to adapt the site to various devices and to define its visible area for smartphone browsers. To activate it, you need to add a correctly adjusted tag in the Head section of the page code.

The meaning of Viewport tag

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:
How Viewport tag works
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.

Setting up a Viewport tag on different devices

In most cases the line with a Viewport tag will look the following way:
Настройка тега meta name viewport
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:
<meta name="viewport" content="width=800, initial-scale=1">
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.

How to identify the resolution of a device

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:
Density value / 150 ( the result should be rounded-off)
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.

Where to write in the Viewport tag

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:
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <!-- page content -->
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:
meta name mobileoptimized content in the page code
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.
This article is a part of Serpstat's "Site Audit" tool
SEO Audit in Serpstat" title = "What is a Viewport meta tag and how to use it 16261788340770" />
Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.
Run Site Audit

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 2 people on average 3.5 out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Discover More SEO Tools

Tools for Keywords

Keywords Research Tools – uncover untapped potential in your niche

Serpstat Features

SERP SEO Tool – the ultimate solution for website optimization

Keyword Difficulty Tool

Stay ahead of the competition and dominate your niche with our keywords difficulty tool

Check Page for SEO

On-page SEO checker – identify technical issues, optimize and drive more traffic to your website

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.




We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Open support chat
mail pocket flipboard Messenger telegramm