UX / UI Critical impact Easy 2 min

Viewport / mobile display

The meta viewport ensures correct display on mobile.

What it is

The viewport meta tag tells the browser how to scale the page to the device width. Without it, mobile renders at desktop width and everything is "tiny and zoomed out".

Why it matters

Google indexes mobile-first: it primarily evaluates the mobile version. Without a correct viewport, the site fails the mobile usability test, which directly lowers rankings, since most visits come from mobile.

How to do it

1Add the standard viewport meta tag to <head>.
2Don't disable zoom (maximum-scale=1 / user-scalable=no), as it harms accessibility.
3Verify that content doesn't overflow horizontally and that buttons are large enough (see the UX audit).

Example

Correct

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

Conclusion

A single line in the head, but essential for a mobile-first world. Without it the site is practically unusable on mobile and Google penalizes it heavily. After deployment, test on a real phone and in the mobile usability tool.