The viewport meta tag (<meta name="viewport">) gives browsers hints about how to size and scale the visible area of a page, mainly on phones. Without it, Lighthouse notes, mobile devices render the page at a typical desktop width and scale it down, which makes it hard to read.
Key values
The common setting is width=device-width, initial-scale=1. According to MDN, width=device-width matches the viewport width to the screen width in CSS pixels, and CSS media queries then apply as intended. Other values include viewport-fit for displays with cutouts and interactive-widget for the on-screen keyboard.
user-scalable=no disables zooming. MDN warns that this fails WCAG requirements, because people with low vision need to enlarge text.
How can you check it?
The Lighthouse audit passes when the <head> contains a viewport tag with a content attribute that includes width=. Lighthouse also reports that an initial-scale below 1 adds a 300 millisecond delay to taps while the browser waits for a possible double tap.
Example
<meta name="viewport" content="width=device-width, initial-scale=1">
Common mistakes
- The tag is missing, so phones show a scaled-down desktop layout.
- Zooming is blocked with
user-scalable=no. initial-scaleis set below 1, which adds a tap delay.
Sources
- <meta name="viewport"> – MDN Web Docsdeveloper.mozilla.org
- Document has a viewport meta tag – Lighthousedeveloper.chrome.com
- Viewport meta tag – Semrush (supplementary)semrush.com
Last updated: