Viewport and zoom

What we check

We read the viewport setting in the head of the home page, an element such as:

<meta name="viewport" content="width=device-width, initial-scale=1">

• If it is missing, this is a serious defect. The same applies if it does not adapt the page to the width of the device. That takes width=device-width or, without a width, initial-scale=1: current browsers derive the device width from it. A fixed width such as width=980, on the other hand, displays the page as on a desktop.
• If it contains user-scalable=no or maximum-scale=1, zooming is locked. This results in a warning.

Why it matters

Without a viewport setting the smartphone browser assumes that the page was made for a large screen. It displays it about 980 pixels wide and then shrinks it to the width of the smartphone. The result: tiny type that can only be read by zooming and swiping sideways. Even a cleanly designed, responsive layout does not take effect without this line.

Google rates websites by their smartphone view. A page that cannot be read on a smartphone is ranked correspondingly lower.

Locked zooming is a widespread mistake from the early days of mobile websites. It was meant to prevent the layout from shifting on double-tap. Today it is unnecessary and excludes people who see poorly and want to enlarge text, such as a phone number, an address or a price. The WCAG accessibility guidelines require that text can be enlarged to double its size.

How to fix it

This one line belongs in the <head> of every page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Remove user-scalable=no, user-scalable=0 and maximum-scale=1 from the setting if present.

WordPress

Current themes set the viewport setting themselves. If it is missing, the theme is very old. Switching to a current, responsive theme solves the problem and many others with it. If a zoom lock is in there, it usually comes from the theme or a plugin. In the file header.php of the theme it can be removed, better in a child theme so that updates do not overwrite it.

Wix, Jimdo, Squarespace

The builders set the setting correctly. There is nothing to do here.

Own code

Search the template for name="viewport" and replace the line with the one above.

How to check it yourself

Open the website on a smartphone. The text should be readable without zooming, and you should still be able to zoom in with two fingers. In the page source you find the setting by searching for viewport.

Frequently asked questions

Why allow zooming? The layout is made for smartphones.

Because not everyone sees equally well. Older people and people with poor eyesight enlarge text, phone numbers or small print. Locked zooming excludes them and violates the accessibility guidelines.

Do smartphones not ignore the zoom lock anyway?

Safari on the iPhone now allows zooming despite the lock, but many Android browsers and embedded views in apps keep to it. The lock brings no advantage, only disadvantages.