Allow zoom, mind safe areas

Keep zoom, pad edges with safe-area insets, fix overflow at its source.

Web Interface Guidelinesvercel-labs · Safe Areas & Layout
Full-bleed layouts need `env(safe-area-inset-*)` for notches
Demo: notch and home indicator ↓View source ↗
Web Interface Guidelinesvercel-labs · Anti-patterns
`user-scalable=no` or `maximum-scale=1` disabling zoom
Demo: pinch to zoom ↓View source ↗
Web Interface Guidelinesvercel-labs · Safe Areas & Layout
Avoid unwanted scrollbars: `overflow-x-hidden` on containers, fix content overflow
Demo: sideways scroll ↓View source ↗

From web-design-guidelines (Web Interface Guidelines).

Notch and home indicator

Tap the tabs near the bottom edge, then try landscape.

No insetsBad
Inbox
  • Ana RuizInvoice 4821 approved
  • PayrollSeptember run is ready
  • Bank feed12 new transactions
  • Leo ParkCan you check the accrual?
  • Tax deskQ3 filing due Oct 31

Opened 0 · Lost 0

.tab-bar { padding-bottom: 0 }
env(safe-area-inset-*)Good
Inbox
  • Ana RuizInvoice 4821 approved
  • PayrollSeptember run is ready
  • Bank feed12 new transactions
  • Leo ParkCan you check the accrual?
  • Tax deskQ3 filing due Oct 31

Opened 0 · Lost 0

padding-bottom: env(safe-area-inset-bottom)
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.app-header {
  padding-top: env(safe-area-inset-top);
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
.tab-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

Pinch to read the fine print

Zoom in on each page and read the fine print.

maximum-scale=1Bad

Order #4821

Renews Oct 31 at $49.00/mo unless cancelled 7 days before. Early termination fee: $120. Taxes calculated at checkout.

Seats
4 × $9.00
Storage
$13.00
Total
$49.00

1.0×

content="…, maximum-scale=1, user-scalable=no"
Default viewportGood

Order #4821

Renews Oct 31 at $49.00/mo unless cancelled 7 days before. Early termination fee: $120. Taxes calculated at checkout.

Seats
4 × $9.00
Storage
$13.00
Total
$49.00

1.0×

content="width=device-width, initial-scale=1"
<meta name="viewport" content="width=device-width, initial-scale=1">

input, select, textarea { font-size: max(16px, 1rem); }
.map { touch-action: none; }

One wide element scrolls all

Scroll each page sideways, then hide or fix the overflow.

Hide itBad
AcmeSign in
Spring closeBooks done by day 3

Invite link:

ClientStatusDueBalance
Northwind LabsIn reviewOct 3$12,400.00
Brightline Co.OpenOct 9$3,180.50

Fix the sourceGood
AcmeSign in
Spring closeBooks done by day 3

Invite link:

ClientStatusDueBalance
Northwind LabsIn reviewOct 3$12,400.00
Brightline Co.OpenOct 9$3,180.50

.hero       { width: 100%; }
.invite     { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
main        { overflow-x: clip; }

Why it matters, pros and cons

Why it matters

Pinch zoom is the accessibility feature everyone knows. Don't take it away.

Pros

  • Meets WCAG 1.4.4 with no settings screen.
  • env() is 0 where no inset exists.
  • Fixed overflow keeps content visible, not clipped.

Cons

  • Insets stay 0 without viewport-fit=cover.
  • iOS zooms into inputs under 16px; enlarge them instead.
  • overflow-x: hidden breaks sticky; prefer clip.