Lewati ke konten utama

Responsive & Adaptive Layout

Breakpoints​

KategoriWidth
Small phone< 360dp
Phone360–599dp
Tablet (portrait)600–839dp
Tablet (landscape)840–1199dp
Desktop / Foldable≥ 1200dp

Best Practices​

  1. Gunakan relative sizing (percentage, flex) bukan fixed pixel.
  2. Test di minimal 3 device size: small phone, phone, tablet.
  3. Gunakan SafeArea / WindowInsets untuk menghindari overlap dengan notch/status bar.
  4. Support landscape orientation jika diperlukan oleh desain.
  5. Support Dynamic Type (iOS) dan Font Scale (Android) untuk accessibility.
Foldable Devices

Untuk Android, pertimbangkan support foldable devices menggunakan WindowManager API / window-size-class.