JavaScript SEO for AI Search: Tutorial with Sam Torres & Tory Gray. JavaScript SEO for AI Search: Sam & Tory. Sign up now!
- Home
- Hints
- Mobile Friendly
- The viewport <meta> tag is missing an initial-scale
The viewport <meta> tag is missing an initial-scale
This means that the URL in question contains a viewport <meta> tag with no initial-scale attribute.
Why is this important?
The browser's viewport is the area of the window in which web content can be seen. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
Using the attribute 'initial-scale=1' instructs browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.
Without the initial-scale attribute, mobile browsers will render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.
What does the Hint check?
This Hint will trigger for any internal URL which contains a viewport <meta> tag with no initial-scale attribute.
Examples that trigger this Hint:
This Hint would trigger for any URL that has a viewport <meta> tag in the <head>, with no initial-scale attribute:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
...
</head>
<body>...</body>
</html>How do you resolve this issue?
Initial-scale is designed to control the zoom level when the page is first loaded, or the orientation is changed. In order to make sure that the content does not appear zoomed in/out, you need to ensure that the initial scale is set to 1.0.
The recommended, 'safe' viewport setting is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Further Reading
Sitebulb Desktop
Find, fix and communicate technical issues with easy visuals, in-depth insights, & prioritized recommendations across 300+ SEO issues.
- Ideal for SEO professionals, consultants & marketing agencies.
Sitebulb Cloud
Get all the capability of Sitebulb Desktop, accessible via your web browser. Crawl at scale without project, crawl credit, or machine limits.
- Perfect for collaboration, remote teams & extreme scale.