The viewport tag controls the page dimensions on different devices by including 'width=device-width'. 

If this width is missing, content will be presented to mobile users at a scale unfit for their devices. 

You can add the ‘device-width’ to your viewport tags to solve this issue. Read on to learn how. 

Table of Contents

Device-Width Improves the User Experience 

If the viewport tag doesn’t have a width set, mobile devices will render the page at the screen width of a desktop. This creates a negative site experience for users, since the content is not to scale.

For example, a page with this viewport …

<meta name="viewport" content="initial-scale=1">

… will present content on mobile devices as it would on a desktop. This means the content would be much harder to read for mobile users.

How to Add Device-Width to Your Viewport Tag

The solution here is to update the width of the viewport tag to be ‘device-width’. This will adjust the content based on the size of the device itself. 

The example viewport tag from above would become:

<meta name="viewport" content="width=device-width, initial-scale=1">

This update can be made directly in your site’s code. If that edit access isn’t available to you, you can bring in the dev team to make the optimization. 

How to Update Viewport Tags at Scale

To make seamless updates across thousands of your site’s pages, you can leverage SEO execution platform ClarityAutomate. 

This way, you can make optimization in a matter of minutes without having to bring in the dev team. You can add the ‘width=device-width’ with the following ClarityAutomate optimization. 

  • Select what you'd like to optimize: Code

Since the viewport tag is a <meta> element and part of your site’s code, that’s what we select in ClarityAutomate.

  • Choose how you'd like to optimize it: Update

This issue involves updating the viewport tag. For other optimizations, ClarityAutomate also lets you add or delete site elements. 

  • XPath: XPath that points to the <meta viewport> on the page

This step lets us focus on the viewport that we need to update.

  • Attribute: content

The specific attribute to update in this situation is content. 

  • New Value: The new value of the content attribute with ‘width=device-width’

As a last step, enter the value to be updated. This update will ensure content matches all screen sizes.

Before and After

With a few clicks in ClarityAutomate, we were able to scale this implementation and update the viewport tag as shown below.

 

Looking for other viewport issues?