No viewport meta tag

What it is

The page has no <meta name="viewport"> tag. That tag tells mobile browsers how wide to lay out the page. Without it, phones assume a desktop-width screen, often about 980 pixels, and scale the whole page down to fit, so a responsive design never gets to show its mobile layout.

Why it matters

Visitors on phones get a zoomed-out page  with tiny text and small tap targets, and have to pinch and scroll sideways to read it. Google indexes and ranks the mobile version  of pages, crawled as a smartphone, and asks whether content displays well on mobile devices as part of page experience.

How Asky checks it

Asky reads the page’s raw HTML and looks for a <meta name="viewport"> element anywhere in it, in the <head> or not. A page without one is reported. The name is matched in any letter case, and a tag added by JavaScript is not seen. When the tag exists, its value is checked by the viewport without width=device-width issue instead. A tag that blocks zooming, with user-scalable=no or a maximum-scale below 2, is a separate accessibility issue.

Reported as an error with high severity.

How to fix it

1. Add <meta name="viewport" content="width=device-width"> inside the <head> of the page template, as MDN  recommends. Many sites also add initial-scale=1 after a comma, which is harmless.
2. Leave out user-scalable=no and any maximum-scale below 2: they stop visitors zooming and raise an accessibility issue.
3. Site builders such as Webflow add the tag to published pages automatically, so a missing tag usually points to a custom template, an old theme, or a page built outside the CMS, such as a landing page tool. Fix it in that template.
4. Check the page on a phone afterwards. A site that was never built to be responsive will now show its desktop layout at phone width, and needs responsive CSS as well.

Example

The <head> of https://example.com/blog/pricing-guide with the tag added:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>SaaS Pricing Guide: Models and Examples | Example Co</title>
</head>

← Back to Mobile