Your viewport tag may be missing the initial-scale attribute set. In this case, you’ll want to add it, or else you face creating a negative user experience. Learn how below.
The initial-scale attribute in a meta viewport tag sets the initial zoom level. This is essential for allowing the browser to control the dimensions and scaling for pages on responsive sites.
This includes when the screen’s orientation changes, like when a mobile device is turned to enter landscape mode.
In your site’s code, the viewport tag with the initial-scale attribute should look like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
It’s important to add the “=1” to the attribute to prevent content from inappropriately zooming in or out. This also creates a 1:1 relationship between CSS pixels and device-independent pixels, no matter the orientation of the device.
Since the viewport tag is part of your site’s code, you’ll need to make this optimization on the backend of your site. If you don’t have edit access, you can tell the dev team why the initial-scale attribute is beneficial to the overall user experience.
To scale the above optimization and implement this change across thousands of pages, you can leverage SEO execution platform ClarityAutomate.
This lets you bypass the dev team to make the changes on your own. Plus, all it takes is a few minutes. Here are the steps.
As you know, the viewport tag is part of your site’s code. That’s what we select in this first step.
The viewport tag already exists, we just need to update it (as opposed to adding or deleting it, which you can do with ClarityAutomate!).
This step specifies the viewport that needs to be updated.
The attribute that we need to update in this situation is content.
As a last step, we add the initial-scale and push the update live.
With a few clicks in ClarityAutomate, we were able to properly update the viewport tag to bring users a better experience.