Mobile resilience

Safe areas

For full-bleed backgrounds, use viewport-fit=cover and apply safe-area padding to the content layer:

max(1rem, env(...)) ensures minimum padding even on devices without insets.

Fixed elements at the bottom need explicit inset handling:

Without this, the home indicator covers your UI.

Never disable zoom

No maximum-scale. No user-scalable=no. If your layout breaks under zoom, the layout is the bug.

Test under zoom

1. Pinch to 200-300% on a phone.
2. Tap form fields, buttons, and links.
3. Overlapping elements, hidden content, or frozen scrolling are bugs.

On desktop: Cmd+= to zoom. Anything that clips or overflows is a layout failure.

100dvh, not 100vh

100vh includes browser chrome on mobile. 100dvh adjusts as browser chrome shows and hides:

Use min-height, not height. Content that exceeds the viewport should scroll, not clip.

text-size-adjust

Mobile Safari auto-scales text in narrow columns:

Common mistakes

• No safe-area inset on fixed bottom elements. Submit button hidden behind the home indicator.
• user-scalable=no from old templates. Audit the viewport meta tag.
• 100vh on mobile layouts. Overflows behind browser chrome. Use 100dvh.
• Forms that break under zoom. Fixed buttons floating on fields, tooltips clipping.
• Side insets forgotten. Horizontal safe areas show in landscape.
• height: 100dvh without min-height. Content clips instead of scrolling.