Mobile UI Optimization

Quick Reference

Viewport Setup

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

Safe Areas (iPhone Dynamic Island & Notch)

:root {
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}