Menguji Berbagai Ukuran Layar

Menulis CSS responsif baru separuh pekerjaan; separuhnya memastikan hasilnya benar pada ukuran-ukuran yang tidak pernah kamu buka sendiri. Untungnya browser modern membawa laboratorium lengkap di dalamnya: device toolbar menyimulasikan puluhan perangkat, lebar apa pun, bahkan jaringan yang lambat. Chapter ini memandu pemakaiannya, menyusun checklist ukuran yang wajib dicoba, dan menandai kapan simulasi perlu digantikan perangkat sungguhan.

Device Toolbar: Laboratorium di Dalam Browser #

Semua browser utama menyertakan mode uji perangkat. Di Chrome dan Edge, buka DevTools dengan F12 lalu tekan Ctrl+Shift+M (di macOS Cmd+Shift+M); di Firefox gunakan Ctrl+Shift+M dari menu Responsive Design Mode. Fitur yang paling sering dipakai:

Device toolbar — fitur yang paling sering dipakai:
- Mode responsif   : tarik pegangan di tepi untuk lebar apa pun
- Preset           : ukuran perangkat populer (ponsel, tablet, laptop)
- Rotasi           : ganti portrait dan landscape dengan satu klik
- Throttling       : simulasi jaringan lambat (mis. Slow 4G) untuk uji performa
- Garis breakpoint : beberapa browser menggambar media query di penggaris

Fungsi tarik-pegangan adalah yang paling produktif: geser perlahan dari 320px ke atas dan hentikan tepat saat layout berubah bentuk — itulah metodologi resize sampai retak dari chapter Breakpoint, dilakukan tanpa menebak-nebak angka. Preset perangkat berguna sebagai pemeriksa kesehatan cepat pada ukuran-ukuran yang populer, dan simulasi jaringan lambat mengingatkan bahwa pengalaman responsif juga soal waktu muat, bukan hanya tata letak.

Satu pengingat penting dari chapter Media Queries: media query mengukur viewport — dan di dalam bingkai demo berikut, viewport-nya adalah bingkai itu sendiri. Perkecil atau perbesar jendela browser dan label di dalamnya berganti seketika:

Inilah alasan semua demo pada section ini bisa dijadikan laboratorium: seluruh halaman berperilaku seperti perangkat yang berbeda saat jendela digeser.

Checklist Ukuran Wajib #

Lima titik ukuran ini mencakup hampir semua kondisi nyata:

Uji juga titik-titik di antara angka-angka itu, bukan hanya angka pasnya — breakpoint memang milik konten, dan layout yang retak di 700px tidak akan terlihat bila kita hanya membuka 320, 768, dan 1440.

Trik Cepat: Zoom dan Orientasi #

Dua pemeriksaan cepat bisa dilakukan tanpa membuka DevTools. Pertama, zoom browser: Ctrl dan tanda minus (Cmd di macOS) memperkecil ukuran CSS pixel sehingga viewport efektif menjadi lebih lebar — perkiraan kasar untuk mengintip wajah desktop, bukan pengganti pengujian sungguhan. Kedua, orientasi: ponsel yang diputar mendatar menghasilkan layar yang lebar tetapi pendek, dan layout yang rapi dalam mode potret bisa sesak di mode lanskap:

@media (orientation: landscape) and (max-height: 480px) {
  .kepala-halaman {
    position: static;    /* lepaskan header menempel saat layar pendek */
  }
}

Media query orientation menilai rasio lebar-tinggi viewport — landscape saat lebar minimal setara tinggi, portrait saat sebaliknya. Kombinasinya dengan max-height menyasar kasus nyata: ponsel lanskap yang tingginya hanya 300-400px, tempat header menempel memakan hampir sepertiga layar.

Kapan Simulasi Tidak Cukup #

Device toolbar mensimulasikan ukuran, bukan perangkat. Empat hal ini baru bisa diverifikasi di perangkat sungguhan:

• Sentuhan — tidak ada :hover di layar sentuh; menu dan petunjuk yang hanya muncul saat hover tidak pernah terlihat di sana.
• Address bar — bilah alamat yang muncul-hilang mengubah tinggi viewport secara dinamis; justru di perangkat nyata perilaku dvh bisa diverifikasi.
• Performa — CPU, GPU, dan jaringan ponsel tidak bisa disimulasikan dengan setia; uji akhir tetap membutuhkan perangkat asli.
• Kepadatan piksel — teks dan garis tipis tampil berbeda pada layar berkepadatan tinggi; yang tampak rapi di monitor besar bisa terlalu tipis di ponsel.

Ringkasan #

Device toolbar memberi lebar apa pun dalam hitungan detik, checklist lima ukuran menjaga pengujian tetap sistematis, dan perangkat sungguhan menutup celah yang tidak bisa disimulasikan: sentuhan, address bar, dan performa. Rutinitas ini melengkapi seluruh bahan section Responsive Web Design — dan chapter terakhir akan merakit semuanya menjadi satu halaman utuh dari nol.