# No mobile-hostile viewport or input configuration - **Pattern:** `ab-001695` (`marketing-advanced-seo.mobile-performance-seo.mobile-hostile-config`) - **Severity:** low - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-001695 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001695) ## Why it matters 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. ## Severity rationale 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. ## Remediation 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. ```tsx // 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: ```css /* 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. ## Detection - **ID:** `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 `` or `` 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. ```css /* app/globals.css — mobile-friendly base */ html { font-size: 16px; } /* Never below 16px */ /* Avoid: */ ``` --- ## External references - wcag 1.4.4 - wcag 2.5.1 Taxons: findability, accessibility HTML version: https://auditbuffet.com/patterns/ab-001695