Mobile viewport misconfiguration — specifically user-scalable=no or maximum-scale=1 — violates WCAG 2.2 SC 1.4.4 (Resize Text) and WCAG 2.2 SC 2.5.1 (Pointer Gestures), both Level AA. Beyond the accessibility compliance impact, Google's mobile usability guidelines explicitly list zoom-disabled viewports as a mobile usability error that can suppress rankings. Fixed-width containers causing horizontal scroll on mobile (e.g., min-width: 1200px) similarly trigger Google's mobile usability report as a crawl-quality signal. These are configuration-level mistakes that affect every page simultaneously — not a per-page optimization gap but a baseline setup error with site-wide ranking consequences.
Low because these configurations affect usability and accessibility compliance rather than direct ranking signals, but the WCAG 2.2 violation scope is site-wide and the fix requires only removing a few CSS or HTML attributes.
Set the viewport meta tag without zoom restrictions — width=device-width, initial-scale=1 is the correct configuration. Remove user-scalable=no, maximum-scale=1, or minimum-scale=1 if present.
// app/layout.tsx — correct viewport configuration
export const metadata = {
viewport: {
width: 'device-width',
initialScale: 1,
// Do NOT add: userScalable: false, maximumScale: 1
},
}
In app/globals.css, check for touch-action: none on html or body — remove it if present, or scope it to the specific interactive component (carousel, canvas) that requires it. Replace fixed-width containers with max-width equivalents:
/* Before: causes horizontal scroll on mobile */
.container { min-width: 1200px; }
/* After: responsive */
.container { max-width: 1200px; width: 100%; }
For complete mobile usability analysis, the Mobile Responsiveness audit covers touch targets, scroll behavior, and layout shift in detail.
ID: marketing-advanced-seo.mobile-performance-seo.mobile-hostile-config
Severity: low
What to look for: Count all viewport-related CSS and HTML patterns. Enumerate any mobile-hostile configurations: fixed-width layouts, disabled zoom, text too small to read on mobile (under 16px). Check for mobile-hostile configuration patterns: (1) user-scalable=no or maximum-scale=1 in the viewport meta tag — prevents zoom, which is both an accessibility violation and a mobile usability signal, (2) CSS that sets touch-action: none on the <body> or <html> element (prevents all touch gestures globally), (3) content hidden exclusively via pointer: coarse media queries (hiding content on touch devices penalizes mobile-first indexing), (4) fixed-width layout containers using min-width values that cause horizontal scroll on mobile (e.g., min-width: 1200px on a non-responsive container).
Pass criteria: No user-scalable=no or maximum-scale=1 in viewport. No site-wide touch-action: none. No fixed desktop-only widths causing horizontal scroll on mobile. No content hidden exclusively via pointer: coarse. Zero mobile-hostile configurations detected. No disabled zoom, no fixed-width layouts, no text under 16px base size.
Fail criteria: Viewport uses user-scalable=no or maximum-scale=1. Site-wide touch-action: none is present. Significant fixed-width containers cause horizontal scroll on mobile viewports.
Skip (N/A) when: No frontend pages (API-only project).
Cross-reference: For mobile-first rendering, see mobile-first-rendering.
Detail on fail: "Mobile-hostile configuration: viewport meta uses 'user-scalable=no' and 'maximum-scale=1'. This prevents users from zooming, which is both an accessibility violation and a mobile usability signal. Also detected: touch-action: none on body element."
Remediation: Mobile usability is a confirmed Google ranking factor. Configure your viewport without zoom restrictions — use only width=device-width, initial-scale=1. Remove touch-action: none from global styles unless scoped to a specific interactive component that genuinely needs it (custom drag-and-drop, canvas drawing). For a complete mobile responsiveness analysis, the Mobile Responsiveness audit covers touch targets, scrolling behavior, and mobile UX in depth.
/* app/globals.css — mobile-friendly base */
html { font-size: 16px; } /* Never below 16px */
/* Avoid: <meta name="viewport" content="user-scalable=no"> */