Mobile responsiveness is verified

ab-002171 · pre-launch.user-facing.mobile-responsive

Severity: highactive

Why it matters

Over 60% of web traffic globally originates from mobile devices. A non-responsive layout — fixed-width containers with no breakpoints — renders unreadably small on phones, forcing users to pinch-zoom or abandon entirely. WCAG 2.2 SC 1.4.4 (Resize Text) and 1.3.4 (Orientation) mandate that content reflows at different viewport sizes. Beyond accessibility compliance, a broken mobile experience means most of your launch-day traffic lands on an unusable product, suppressing conversion and retention from day one.

Severity rationale

High because a non-responsive layout makes the application unusable for the majority of mobile visitors, violating WCAG 2.2 SC 1.4.4 and directly suppressing conversion at launch.

Remediation

Confirm the viewport meta tag is present and that layout components use responsive CSS techniques — Tailwind responsive prefixes, CSS media queries, or a responsive UI framework.

// app/layout.tsx — viewport meta (Next.js App Router)
export const metadata = {
  viewport: { width: 'device-width', initialScale: 1 },
}

If using Tailwind, apply responsive prefixes: flex-col sm:flex-row, w-full md:w-1/2. Avoid fixed pixel widths on containers — use max-w-* with w-full. Test at 375px (iPhone SE) and 390px (iPhone 14) in browser dev tools. Pay special attention to navigation menus (must collapse), forms (must remain tappable), and tables (must scroll horizontally, not overflow).

Detection

ID: mobile-responsive
Severity: high
What to look for: Count all viewport meta tags and responsive CSS patterns (media queries, flexbox, grid). Enumerate whether the layout adapts to mobile screen widths (under 768px). Check that a responsive viewport meta tag is present (<meta name="viewport" content="width=device-width, initial-scale=1">). Check that CSS uses responsive techniques: Tailwind responsive prefixes (sm:, md:, lg:), CSS media queries, or a responsive UI framework. Check that layouts do not use fixed-width containers without responsive breakpoints. Look for evidence of mobile-specific layout handling (flex-col on mobile, flex-row on desktop patterns).
Pass criteria: Viewport meta tag is present, and the CSS/layout approach demonstrates responsive design intent (responsive framework or media queries present). At least 1 viewport meta tag and at least 3 responsive CSS patterns must be present.
Fail criteria: No viewport meta tag found, or all layout components use fixed-width containers with no responsive breakpoints.
Skip (N/A) when: Skip for API-only projects with no HTML pages. Signal: project type is api with no frontend pages.
Cross-reference: For cross-browser testing, see cross-browser.
Detail on fail: "No viewport meta tag found" or "All layout containers use fixed pixel widths with no responsive breakpoints — site will not render correctly on mobile devices"
Remediation: Over 60% of web traffic comes from mobile devices. A non-responsive layout loses the majority of potential users:
```
// app/layout.tsx — viewport meta
export const metadata = { viewport: { width: 'device-width', initialScale: 1 } }
```
1. Ensure the viewport meta tag is in your <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.
2. In Next.js App Router, add it to app/layout.tsx via the metadata object or directly in the head.
3. If using Tailwind, use responsive prefixes: flex-col sm:flex-row, w-full md:w-1/2, etc.
4. Test on real mobile devices or browser dev tools device simulator at 375px (iPhone SE) and 390px (iPhone 14) widths minimum.
5. Pay special attention to: navigation menus collapsing correctly, forms remaining usable, tables scrolling horizontally rather than overflowing.
For a thorough analysis of mobile responsiveness across your entire codebase, the Mobile Responsiveness Audit covers this in depth.

External references

wcag:2.2 · 1.4.4 — Resize text — text can be resized without assistive technology up to 200% without loss of content or functionality
wcag:2.2 · 1.3.4 — Orientation — content does not restrict its view and operation to a single display orientation
section-508:2018-refresh · 502.3.1 — Object Information — supports responsive/zoom

Taxons

user-experience

History

2026-04-18·v1.0.0·Initial import from pre-launch·automated

Why it matters

Remediation

Confirm the viewport meta tag is present and that layout components use responsive CSS techniques — Tailwind responsive prefixes, CSS media queries, or a responsive UI framework.

// app/layout.tsx — viewport meta (Next.js App Router)
export const metadata = {
  viewport: { width: 'device-width', initialScale: 1 },
}

Detection

ID: mobile-responsive
Severity: high
What to look for: Count all viewport meta tags and responsive CSS patterns (media queries, flexbox, grid). Enumerate whether the layout adapts to mobile screen widths (under 768px). Check that a responsive viewport meta tag is present (<meta name="viewport" content="width=device-width, initial-scale=1">). Check that CSS uses responsive techniques: Tailwind responsive prefixes (sm:, md:, lg:), CSS media queries, or a responsive UI framework. Check that layouts do not use fixed-width containers without responsive breakpoints. Look for evidence of mobile-specific layout handling (flex-col on mobile, flex-row on desktop patterns).
Pass criteria: Viewport meta tag is present, and the CSS/layout approach demonstrates responsive design intent (responsive framework or media queries present). At least 1 viewport meta tag and at least 3 responsive CSS patterns must be present.
Fail criteria: No viewport meta tag found, or all layout components use fixed-width containers with no responsive breakpoints.
Skip (N/A) when: Skip for API-only projects with no HTML pages. Signal: project type is api with no frontend pages.
Cross-reference: For cross-browser testing, see cross-browser.
Detail on fail: "No viewport meta tag found" or "All layout containers use fixed pixel widths with no responsive breakpoints — site will not render correctly on mobile devices"
Remediation: Over 60% of web traffic comes from mobile devices. A non-responsive layout loses the majority of potential users:
```
// app/layout.tsx — viewport meta
export const metadata = { viewport: { width: 'device-width', initialScale: 1 } }
```
1. Ensure the viewport meta tag is in your <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.
2. In Next.js App Router, add it to app/layout.tsx via the metadata object or directly in the head.
3. If using Tailwind, use responsive prefixes: flex-col sm:flex-row, w-full md:w-1/2, etc.
4. Test on real mobile devices or browser dev tools device simulator at 375px (iPhone SE) and 390px (iPhone 14) widths minimum.
5. Pay special attention to: navigation menus collapsing correctly, forms remaining usable, tables scrolling horizontally rather than overflowing.
For a thorough analysis of mobile responsiveness across your entire codebase, the Mobile Responsiveness Audit covers this in depth.

External references

wcag:2.2 · 1.4.4 — Resize text — text can be resized without assistive technology up to 200% without loss of content or functionality

wcag:2.2 · 1.3.4 — Orientation — content does not restrict its view and operation to a single display orientation

section-508:2018-refresh · 502.3.1 — Object Information — supports responsive/zoom