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.