Get free SEO audit

Fast Links

Free SEO Audit

Crawl the website for technical issues and get a prioritized to-do list with detailed guides on how to fix.

Sitechecker crozdesk rating Sitechecker crowd rating Sitechecker capterra rating
Sitechecker trusted company

Check if Viewport Meta Tag Works Properly

Check if Viewport Meta Tag Works Properly

The Viewport meta tag is used to adapt the site to all devices from which users view your site and sets instructions for displaying the visible area in the mobile browser (like on iOS). The browser viewport is the window area in which the user can see media content. The browser then displays scroll bars to access all the content on a particular page. It is usually not the same size as the displayed page.

Narrow-screen mobile devices display pages in a virtual window, which is normally wider than the screen, and then shrink the result for instant viewing by users. Users can then move around the page and zoom in to see different areas. This method exists so that pages that are not optimized for mobile devices adjust their size to fit the device when displayed with a small viewing area width. With this CSS meta name=viewport, developers can improve the appearance of sites for devices with a narrow screen.

We have created a free tool Meta Name Viewport Test. With its help, you can check how the pages of your site are displayed on mobile devices and whether the tag on the page is contents correctly.

Let’s see how you can use the tool to check the settings of your website.

What is a Viewport Meta Tag

The window view area is shown to the user without scrolling. It means it’s easy for the user to read text, view pictures, scroll through content, fill in columns, and make purchases.

Let’s break down the element options. The width property indicates the size of the viewing area. This value can be set to a certain number of pixels. Sometimes a problem occurs when the viewport <meta> tag sets a certain width. You can also read the article about how to fix the issue of the specific HTML viewport width .

The initial-scale property controls the zoom level when the webpage first loads. The maximum-scale, minimum-scale, and user-scalable properties control whether users are allowed to zoom in or out. It is necessary to eliminate errors when the initial scale is missing in the <meta> viewport tag. Read the guide for fixing the issue of missing initial scale.

Meta Name Viewport Test Usage: A Step-by-Step Guide

The most appropriate value for the tag is to automatically scale the width to the size of the browser screen. In addition, you can set the page height, allow or disallow manual zooming in/out, allow or disallow scaling the site.

Our free Metaname Viewport Test tool will allow you to check how the meta viewport tag works and how properly its settings are set.

Below, we’ll show you step-by-step how you can use the tool. For example, we used the home page of our site sitechecker.pro.

Step 1: Insert your URL

To start working with the tool, simply enter the site’s address in the blank line and start scanning by clicking on the blue button.

Meta Name Viewport Test - check meta tag viewport of web pages

Step 2: Interpreting the Results whether the Viewport Meta Tag Works Properly

After you finish scanning in the tool, you’ll get results on whether the tag is set up correctly on the site page. Our tool checks whether the viewport meta tag works correctly with Mobile PageSpeed Insights.

The results table will show how the page displays on a mobile phone.

Meta Name Viewport Test Mobile Version - check viewport meta element and follow browser instructions

Meta Name Viewport Test Results - check web page on mobile screen with translating multiple hardware pixels

Cases When the Meta Name Viewport Check is Needed

The viewport meta tag allows you to tell the mobile browser what the virtual viewport design should be. It is often useful if you’re not redesigning your site for mobile devices. You don’t want to spend your time and effort creating a mobile version of your site. In that case, use this tag to make your site’s content display better with a larger or smaller virtual viewing window.

Check that the tag is set correctly with our tool, and rest assured that your site users see content the way you intended.

When you don’t Use Meta name=”viewport”

The browser will look for instructions to scale the resource page in the “viewport” tag or setting. If you miss this point and don’t specify it, the browser will show the user the default web page size for the desktop and try to optimize the content by enlarging fonts and elements. With it, the user will see content that fits in the view window on the screen. The user will have to scale the page themselves or use horizontal scrolling to adjust the viewing area to fit their device.

Keep in mind that search engines such as Google will not consider such pages responsive and will not give them high positions in the search engine queries. Therefore, you should not lose potential traffic and search engine rankings.

Checking Meta tag viewport is important but not enough to rank good enough!

Check not only the issue but make a full audit to find out and fix your technical SEO.

Sitechecker rating on crozdesk Sitechecker rating on crowd Sitechecker rating on capterra

FAQ

  • Width – sets the width of the layout viewport.
  • Initial-scale – sets the initial page scale and width of the layout viewport.
  • Minimum-scale – sets the minimum zoom level.
  • Maximum-scale – sets the maximum zoom level.

To make the adaptive meta layout work, you need to add a line with the appropriate parameters to the Head of each site page or install the appropriate plugin for your CMS. To activate the tag, you need to add it to the Head HTML section of the page code, specifying the necessary parameters.

Check other of our awesome SEO tools!
Traffic Checker Estimate website traffic stats by different channels & in different periods.
Rank Checker Get a report with keywords that bring the website the most of organic traffic.
Speed Test Test a specific page for speed and get suggestions how to improve it.
Backlinks Checker Our free backlink checker tool will help you monitor links to your website.
Website Safety Check out that the website is safe and not listed as suspicious.
Similar Websites Free tools allowing users to get information on similar sites in a few seconds.
View all tools

Check your website SEO performance

Get a personalized checklist on how to improve your website to rank higher on Google

Something went wrong. Please, try again later.
close