Mobile usability and the viewport tag

Without instruction, a mobile browser assumes a page was designed for a desktop monitor. It renders it into a virtual window roughly 980 pixels wide and then scales the whole thing down to fit the screen. The result is a technically complete page rendered at unreadable size, requiring pinch-zoom and horizontal scrolling.

The viewport meta tag tells the browser to use the device's real width instead:

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

That belongs in the head of every page. Two details matter: width=device-width is the part that fixes the scaling, and you should not add user-scalable=no or a maximum-scale below about 5 — disabling zoom is an accessibility failure and Google flags it.

Google crawls and evaluates the mobile version of your site by default. A reviewer forming an impression of your content is looking at the same mobile rendering. A site that requires zooming to read reads as neglected regardless of how good the writing is, and mobile ads on a badly-scaled page perform poorly, which is a commercial consideration as well as a usability one.

• Horizontal overflow. One wide element — a table, a code block, a fixed-width image, a long unbroken URL — pushes the whole page sideways. Everything else can be perfect and the page still feels broken.
• Tap targets too small or too close together. Links in a dense list, or icons packed into a row, become a lottery on a thumb.
• Text below about 16px, or grey-on-grey body copy that is legible on a bright monitor and invisible outdoors.
• Fixed headers that eat a third of a small screen.
• Interstitials and pop-ups that cover the content on arrival. Google treats intrusive mobile interstitials as a negative signal in its own right.
• Content that shifts as images and ads load, so the reader loses their place or taps the wrong thing.

That last one — layout shift — is also directly measured as Cumulative Layout Shift. Reserving space for ad slots and images fixes both the usability problem and the metric.

1. Open your site on an actual phone, on mobile data rather than home wifi. This surfaces speed and layout problems together.
2. In desktop browser dev tools, use device emulation at a narrow width, around 360px, and scroll every page looking for horizontal movement.
3. Run PageSpeed Insights on the mobile tab and read the accessibility and best-practices sections, not just the performance number.
4. Check the head of your pages for the viewport tag — view source rather than the rendered DOM inspector, so you are seeing what a crawler receives.
5. Ask someone else to complete your site's main task on their phone without instructions and watch where they hesitate.

Once approved, mobile ad placement is where most policy trouble starts. The rules that keep you safe are simple: reserve the space so the ad does not shove content when it loads, keep ads clearly separated from navigation and buttons so nobody taps one by accident, and never stack ads so that the screen on arrival is mostly advertising. Accidental clicks caused by tight placement are treated as invalid traffic, and that is an account-level problem rather than a warning.

• Viewport tag present on every page, no zoom disabling.
• No horizontal scroll at 360px on any page.
• Body text at least 16px with real contrast.
• Navigation usable one-handed; menu opens and closes reliably.
• No pop-up covering content on first load.
• Images sized responsively rather than at fixed pixel widths.