SH009 – Mobile Layout Integrity

Overview

Checks mobile-friendly signals: viewport meta, theme-color, responsive indicators, touch target size hints.

Probability that AI systems use this signal: Crawlers and generative AI pipelines consume structured and visible page signals for training and inference. Assessment-specific signals (e.g. schema, canonicals, trust cues) affect how likely a page is indexed and surfaced. The probability that this assessment's signal influences AI behavior is high when the page is in a product or compliance context.

Impact on geo compliance: Passing this assessment supports geo compliance by ensuring machine-readable and visible content meet standards that reduce the risk of wrong locale, pricing, or trust in AI-generated answers. Failing can lead to non-compliant or misleading surfacing.

What We Check

**_check_viewport_meta:** meta[name="viewport"] content has "width=device-width" and "initial-scale=1". Missing: −50.
**_check_theme_color:** meta[name="theme-color"] present. Missing: −10.
**_check_responsive_design:** any of meta[name="viewport"], link[media*="screen"], [class*="responsive"], [class*="mobile"], [class*="tablet"]. Missing: −20.
**_analyze_touch_targets:** button, a with inline style; if "width:20px" or "height:20px" in style → issue. −10 per. **_check_touch_targets:** just checks existence of button/a/input/[role=button].

Pass / Fail and Score

**PASSED** if score >= 60.

How to Fix When It Fails

Add viewport meta (width=device-width, initial-scale=1.0); add theme-color; add responsive/mobile classes or media; ensure touch targets ≥44px (avoid 20px in inline style).

Common Issues

No viewport; no theme-color; no responsive cues; small inline-sized buttons/links.

Dependencies

None.

How to Verify

Check head for viewport and theme-color; search for responsive/mobile classes; check button/link sizes.

Additional Resources

Mobile-friendly test; viewport meta; WCAG touch target size