Skip to content
Log inTest my visibilityStart free trial
Log in
Language English
Start free trial Test my visibility

Fit the page to a phone screen

Technical Updated Oct 4, 2026

Description

This criterion checks that the page displays correctly on a phone. iPand loads it on a simulated Pixel 7, 412 px wide, and checks four points: the viewport tag declares width=device-width without blocking zoom, the page does not overflow horizontally, at least 60% of the visible text is 12 px or larger, and the layout moves little while loading (CLS of 0.1 or less).

Why it matters for AI engines

Google indexes the mobile version of your pages, crawled by its smartphone crawler, and both AI Overviews and AI Mode rely on that index. Google also counts mobile-friendly display among the elements of a good page experience, which it recommends for its AI features.

  • Without a viewport tag, the phone shows the page like a shrunken desktop screen: tiny text and zooming required.
  • Blocking zoom (user-scalable=no) prevents people with low vision from reading the page; the WCAG accessibility rules require at least 2× magnification.
  • Content that moves while loading makes people tap the wrong spot: CLS measures these shifts, and web.dev rates it good at 0.1 or less.

How to fix it

  1. 1 Declare the viewport Put the <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the head of the page. Do not add user-scalable=no, nor a maximum-scale below 2: your visitors must be able to zoom. This is the point that weighs most in the criterion.
  2. 2 Remove horizontal overflow The page must not be wider than the screen, which is 412 px for iPand. Look for fixed-width elements: images, tables, embedded videos, blocks sized in pixels. Give images max-width: 100% and prefer flexible layouts (Flexbox, Grid) to fixed widths.
  3. 3 Make the text larger At least 60% of the visible text must be 12 px or larger. Keep body text close to 16 px, the browsers’ default size, and check legal notices, menus and footers, which are often written too small.
  4. 4 Reserve space for images and embeds CLS must not exceed 0.1. Set width and height on images and videos, reserve the height of banners, ads and widgets before they load, and do not insert content above what is already displayed.

Key takeaway

Google reads the mobile version of your page. Declare the viewport without blocking zoom, avoid overflow, and keep text readable and the layout stable.

Further reading