What the viewport tag does
The viewport tag tells phones that the page adapts to the width of the screen. Without it they show the page shrunk down, as on a desktop.
How it works
Mobile browsers date from a time when websites were built for large screens only. Without further instructions they therefore pretend the screen is about 980 pixels wide and shrink the page to the width of the phone. The text becomes tiny, and you have to zoom and scroll sideways.
The viewport tag in the head of the page switches that off:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width means the page is as wide as the screen. initial-scale=1 means it opens without zooming in or out. Only then can a responsive layout, which adapts to small screens with CSS, take effect.
The tag affects three areas, which bytereport checks separately:
- Search. Google rates pages by their mobile version. Without a viewport, a page counts as not made for phones.
- Load time. Without a viewport, mobile browsers delay every tap while they wait to see whether a second one follows for zooming. With
width=device-widththat delay goes away. - Accessibility. People with low vision enlarge pages with two fingers. The viewport setting must not block that.
What matters
- Exactly this line.
width=device-width, initial-scale=1is all a page needs. - Do not block zooming.
user-scalable=noand amaximum-scalebelow 2 stop visitors from enlarging the page. That breaches WCAG (success criterion 1.4.4, resizing text to 200 %). bytereport rates both as a failure. - Responsive layout. The tag alone does not make a page work on phones. The layout has to adapt to narrow screens with CSS as well; see What reflow on zoom means.
- No fixed pixel width. A fixed width such as
width=1024brings back the desktop problem.
How to set it up
Current themes and site builders add the tag themselves. If it is missing or blocks zooming, it sits in the header template, such as header.php in WordPress. Change the line there to:
<meta name="viewport" content="width=device-width, initial-scale=1">If you have no access to the templates, your agency or whoever maintains the theme will do this.