You know that now your pages are not displayed with the correct width on different devices. And you want to fix it. Below you will find out the details of how to resolve this issue. No JavaScript changes are required to fix this issue.
What does “The specific HTML viewport width” mean?
This means that the page in question has a viewport meta tag with a specific width set. For example, this is how it might look in an HTML document:
<meta name=”viewport” content=”width=600″,”initial-scale=1″>
You can discover more details about the viewport width 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?
Your development team or outsourcing company has created a web application and set a specific width with which mobile browsers display your site on smartphones. But you have noticed that pages look bigger or smaller on portable devices due to different screen sizes. Hence, users must zoom in or out to read the content on your scaled page. This is pretty awkward. And you can lose a lot of actual and potential users due to the specific width in the viewport meta tag.
People can find another site where all the elements look properly for their smartphone screens.
How to check the issue?
You can quickly and easily check how your pages look on your smartphone. It would help if you did the following:
- Open your website page from on a laptop
- Press Ctrl+U
- Press Ctrl+F
- Enter “meta name=”viewport” content=”width” in the field
And you will see the width in the viewport meta tag. Then you need to check other pages of your site to figure out where the width needs to be fixed.
Analyze not only the viewport tag having a specific width set but the entire site!
Make a full audit to find out and fix your technical SEO in order to improve your SERP results.
Why is this important?
Users visit your page and don’t want to think that they need to adjust the scale to fit their smartphone screen. They want to get useful information on your site, so don’t make the width awkward to read.
How to fix the issue?
You need to replace the specific width value “width=600” with “width=device-width.” Here are some examples that you can use:
- <meta name=”viewport” content=”width=device-width, initial-scale=1″>
- <meta name=”viewport” content=”width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes, maximum-scale=5.0″ />
- <!–<meta name=”viewport” content=”width=device-width, minimum-scale=1.0,user-scalable=yes”>–>
