Mobile content parity and usabilityWhat it checks and how to fix it

What it checks

Looks for three mobile problems: a missing viewport meta tag, a viewport that blocks zooming (user-scalable=no or maximum-scale=1), and large content blocks (div, section, article, main or p with more than 20 words) hidden with inline display:none or visibility:hidden. One problem is a warning, two or more fail the check, and none passes.

Why it matters

Google indexes the mobile version of your pages, so content that is hidden or unusable on a phone is content that may not count for ranking. Blocking pinch-to-zoom also makes the page hard to read for people with low vision and is an accessibility failure in its own right.

How to fix it

Use a viewport tag that lets the page scale to the device and lets people zoom:

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

Remove user-scalable=no and maximum-scale=1 if they are present:

<!-- before -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- after -->
<meta name="viewport" content="width=device-width, initial-scale=1">

For content hidden with inline styles, show the same content on every device and adapt its layout with CSS instead of hiding it:

/* instead of style="display:none" on the mobile copy */
.details { display: block; }
@media (min-width: 768px) {
  .details { columns: 2; }
}

Collapsed sections (tabs, accordions) are fine as long as the text is in the HTML; just avoid serving important copy only to desktop.