Mobile-responsive design tested on iOS and Android

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.

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:

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

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

// 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.

• 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:

     export const metadata = {
       viewport: 'width=device-width, initial-scale=1.0'
     }
     

  2. Use responsive design patterns (Tailwind, CSS Media Queries, or CSS Grid):

     <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.