Viewport tag without width=device-width

What it is

The page has a viewport meta tag, but its content does not include width=device-width, the value that makes the layout width match the phone’s screen. A tag such as content="width=1024" pins the layout to another width, and one with only initial-scale=1 leaves the browser to derive the width from the scale.

Why it matters

With a fixed width, phones shrink a wider layout or show a narrow one with empty space beside it, so text is hard to read and visitors have to zoom. MDN  and web.dev  both give width=device-width as the baseline. Google indexes the mobile version  of pages, so the version phones get is the one Google indexes and ranks.

How Asky checks it

Asky reads the first <meta name="viewport"> in the page’s raw HTML, the name in any letter case, and reports it when its content does not contain width=device-width. Letter case and spaces are ignored, as browsers ignore them, so Width = Device-Width passes. Later viewport tags are not read. A page without any viewport tag is reported as missing the tag instead, and a tag that blocks zooming (user-scalable=no, or a maximum-scale below 2) is a separate accessibility issue.

Reported as a warning with medium severity.

How to fix it

1. Find the viewport tag in the <head> of the page template.
2. Set its content to width=device-width. Adding initial-scale=1 after a comma is common and harmless.
3. Remove fixed widths such as width=1024, and zoom limits such as user-scalable=no or maximum-scale=1, which raise an accessibility issue.
4. If the page prints several viewport tags, for example one from the theme and one from a plugin, remove the extras so the first one is correct.
5. Check the page on a phone: a design built at a fixed width may also need responsive CSS.

Example

A landing page on https://example.com built for a 1024-pixel layout:

<!-- Before -->
<meta name="viewport" content="width=1024">
 
<!-- After -->
<meta name="viewport" content="width=device-width">

← Back to Mobile