Viewport Meta Tag.

The viewport meta tag (`<meta name='viewport' content='width=device-width, initial-scale=1'>`) instructs the browser how to control the page's dimensions and scaling on mobile devices. Without it, mobile browsers render the page at desktop width (typically 980px) then shrink it to fit the screen—producing tiny, unreadable text and broken layouts.

Viewport and Mobile-First Indexing

Google uses mobile-first indexing, meaning it crawls and indexes the mobile version of pages. A missing or incorrectly configured viewport tag prevents the mobile version from rendering correctly, which directly affects how Googlebot evaluates the page. Pages lacking the viewport tag fail Google's mobile usability checks in Search Console and are penalised in mobile search rankings.

Common Viewport Configurations

The standard tag `width=device-width, initial-scale=1` is correct for responsive designs. `user-scalable=no` or `maximum-scale=1` should be avoided—they prevent users from zooming, which is an accessibility violation under WCAG guidelines and a negative UX signal. Setting a fixed width (e.g. `width=320`) is rarely appropriate and prevents content from adapting to larger mobile screens.