# Mobile-responsive design tested on iOS and Android

- **Pattern:** `ab-001622` (`gov-web-standards.uswds-alignment.mobile-responsive`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001622
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001622)

## Why it matters

The 21st Century IDEA Act (Sec. 3) explicitly requires all federal websites to be mobile-friendly, and WCAG 2.2 SC 1.3.4 prohibits restricting content to a single screen orientation. Government sites that render desktop-only layouts on mobile browsers exclude millions of users — the majority of U.S. residents now access federal services primarily via smartphone. A missing viewport meta tag is the single most common cause of mobile rendering failure and causes full-desktop layout to render at desktop scale on phone screens, making text illegible and forms unusable without pinch-zoom.

## Severity rationale

Medium because missing responsive design patterns or a viewport meta tag violates the 21st Century IDEA Act's mobile-friendly mandate and WCAG 2.2 SC 1.3.4, blocking mobile-primary users — a majority of government site visitors — from accessing services without error-prone manual zooming.

## Remediation

Confirm the viewport meta tag is present, then audit layout files for responsive patterns. In Next.js, set the viewport in your root layout's metadata:

```tsx
// app/layout.tsx
export const metadata = {
  viewport: { width: 'device-width', initialScale: 1 },
}
```

Apply responsive grid or flex patterns using Tailwind or USWDS grid classes:

```tsx
// Responsive grid example
<div className="usa-grid">
  <div className="usa-width-one-half">Content</div>
  <div className="usa-width-one-half">Content</div>
</div>

// Or with Tailwind
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>
```

Test with Chrome DevTools device emulation for iPhone 14 (390px) and a mid-range Android (360px) before each release.

## Detection

- **ID:** `mobile-responsive`
- **Severity:** `medium`
- **What to look for:** Check the framework's responsive design setup (viewport meta tag, media queries, mobile-first CSS, responsive images). List all layout and page files and count every responsive pattern found (media queries, responsive utility classes, grid/flex patterns). For Next.js with Next.js Image, check that images are responsive.
- **Pass criteria:** The site has a viewport meta tag configured, uses responsive design techniques in at least 80% of layout/page files (media queries, responsive classes, or framework-native responsive utilities), and has been tested on at least 2 mobile platforms (iOS Safari and Android Chrome).
- **Fail criteria:** Missing viewport meta tag, fewer than 80% of pages use responsive patterns, or no evidence of mobile testing.
- **Skip (N/A) when:** Never — mobile responsiveness is critical for government sites (Executive Order 13642).
- **Detail on fail:** `"Viewport meta tag missing — mobile browsers will render a desktop layout"` or `"No responsive design patterns found; site uses fixed widths only"` or `"No iOS or Android testing documented"`
- **Remediation:** Ensure your site is mobile-responsive:

  1. Add a viewport meta tag in your layout:
     ```tsx
     export const metadata = {
       viewport: 'width=device-width, initial-scale=1.0'
     }
     ```

  2. Use responsive design patterns (Tailwind, CSS Media Queries, or CSS Grid):
     ```tsx
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       {/* Responsive grid */}
     </div>
     ```

  3. Test on iOS Safari and Android Chrome using browser DevTools or real devices.

## External references

- external 21st-century-idea-act-sec-3 — https://www.congress.gov/bill/115th-congress/house-bill/5759/text
- wcag 1.3.4

Taxons: user-experience, regulatory-conformance

HTML version: https://auditbuffet.com/patterns/ab-001622