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);
}

body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

Touch Target Minimums

• Minimum size: 44×44px (Apple HIG) / 48×48dp (Material Design)
• Recommended: 48×48px with 8px spacing between targets
• Critical actions: 56×56px minimum

Typography Scale

:root {
  --text-xs: clamp(0.75rem, 2.5vw, 0.875rem);   /* 12-14px */
  --text-sm: clamp(0.875rem, 3vw, 1rem);        /* 14-16px */
  --text-base: clamp(1rem, 3.5vw, 1.125rem);    /* 16-18px */
  --text-lg: clamp(1.125rem, 4vw, 1.25rem);     /* 18-20px */
  --text-xl: clamp(1.25rem, 4.5vw, 1.5rem);     /* 20-24px */
  --text-2xl: clamp(1.5rem, 5vw, 2rem);         /* 24-32px */
}

Device Breakpoints

Tailwind Breakpoints

// tailwind.config.js
screens: {
  'xs': '375px',    // iPhone SE, small phones
  'sm': '390px',    // iPhone 14/15/16 base
  'md': '430px',    // iPhone Pro Max, large phones
  'lg': '768px',    // Tablets
  'xl': '1024px',   // Desktop
}

Core Patterns

1. Responsive Container

<div className="w-full max-w-screen-sm mx-auto px-4 
  pt-[env(safe-area-inset-top)] 
  pb-[env(safe-area-inset-bottom)]">
  {children}
</div>

2. Bottom Navigation (iOS Home Indicator Safe)

<nav className="fixed bottom-0 left-0 right-0 
  bg-white border-t border-gray-200
  pb-[env(safe-area-inset-bottom)]">
  <div className="flex justify-around py-2">
    {/* Nav items with min-h-[44px] */}
  </div>
</nav>

3. Touch-Optimized Button

<button className="min-h-[44px] min-w-[44px] px-4 py-3
  active:scale-95 transition-transform
  touch-manipulation">
  {label}
</button>

4. Scroll Container (Momentum Scrolling)

<div className="overflow-y-auto overscroll-contain
  -webkit-overflow-scrolling: touch
  scroll-snap-type-y-mandatory">
  {children}
</div>

Critical Rules

1. NEVER use user-scalable=no or maximum-scale=1 – breaks accessibility
2. ALWAYS use touch-manipulation on interactive elements to remove 300ms delay
3. ALWAYS account for Dynamic Island/notch with env(safe-area-inset-*)
4. NEVER rely on hover states for critical interactions
5. ALWAYS provide visible focus states for keyboard/assistive technology users

Detailed Guides

• Viewport & Safe Areas: See VIEWPORT.md
• Touch Interactions: See TOUCH.md
• Typography & Readability: See TYPOGRAPHY.md
• Performance: See PERFORMANCE.md
• Forms & Inputs: See FORMS.md
• Navigation Patterns: See NAVIGATION.md
• Testing Checklist: See TESTING.md