You want elements of your website pages to display correctly on different devices. So, it would help if you used the initial scale in the viewport meta tag.
What Does “The Initial Scale in the Viewport Meta Tag is not Working” Mean?
This means that the URL in question does not contain the initial scale in the HTML document. Or, this element is on the page, but you set it to a value other than 1.0. Besides, the initial scale is an optional attribute for the viewport meta tag that helps control the zoom level when the page is first loaded.
You can discover more details about using the initial scale here.
Also, you can watch a video tutorial by Matt Cutts from Google to discover how much time you should spend on meta tags.
What Triggers This Issue?
You want your web and mobile pages to display at the same standard size on the first load. But for some reason, they don’t act as you want. The following are possible reasons:
- Multiple viewport meta tags were found in the <head> of a HTML document
- No initial scale is recognized
- The initial scale is found with a value other than 1.0
How to Check the Issue?
You can go to your website page from your computer, press Ctrl+U, press Ctrl+F, and enter “initial scale” in the field. Then you will see one of the possible reasons for incorrect scaling, which we described in the previous block. In addition, you need to check with the rest of the pages of your site so that the initial scale is not ignored there.
Or you can use Sitechecker to track various viewport-related problems.
If you delve deeper into a problem, you will find a list of impacted pages along with the option to see their source code.
Ensure your site starts off on the right scale!
Is your viewport's initial scale set correctly? Don't guess, check it with Sitechecker!
Why is This Important?
The initial scale allows all elements on your page to display correctly when users visit your site. from different devices. In this case, text, buttons, icons, and images do not overlap. Moreover, the maximum scale can also fit your site if you want to add the scaling of your pages for users. You may need to set here such a value at which the content on the site will also be displayed right.
How to Fix the Issue?
Below you can find an example of the correct use of the initial scale in an HTML document:
<meta name=”viewport” content=”width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes, maximum-scale=5.0″ />
