← Balik ke WA Flow

Mobile preview — Cek Budget Kalkulator

Ini tampilan yang user lihat setelah klik "Cek budget dulu" di WA. Frame kiri ukuran iPhone (390px), kanan tablet (768px). Scroll di dalem frame buat liat full halaman.

💬 WA → 🏠 Buat ditinggali → Klik "💰 Cek budget dulu" → 📱 Buka di browser HP

📱 iPhone 14 Pro · 390 × 844

📱 Tablet / iPad mini · 480 × portrait

Checklist mobile readiness

Viewport tag — sudah ada (width=device-width, initial-scale=1.0) ✓
Container fluid — max-width: 720px, di mobile jadi full-width dengan padding 20px ✓
Mobile-first CSS — base styles untuk mobile, breakpoint min-width: 600px & 900px buat scale up ✓
Mobile tweaks — @media (max-width: 520px) nge-reduce padding card & font size h1 ✓
Touch target — input fields, buttons, slider sizing — perlu cek manual di HP asli (target min 44×44px)

Cara final verify: Buka langsung di HP kamu pakai DevTools mode mobile, atau scan QR ke file. Kalau mau full test, hosting dulu ke staging biar bisa diakses dari HP asli.

Buka calculator full-screen →