This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
67
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">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>
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.

Conclusion

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
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

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

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

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits