Penguji Ukuran Viewport & Breakpoint Responsif
Lihat seberapa besar sebenarnya jendela browser Anda bagi sebuah halaman web. Alat ini membaca lebar dan tinggi viewport Anda dalam piksel CSS, rasio piksel perangkat dan orientasi Anda, serta menunjukkan breakpoint responsif mana yang sesuai dengan ukuran saat ini — semuanya secara langsung. Ubah ukuran jendela dan setiap nilai akan diperbarui secara instan.
Ubah ukuran jendela browser Anda dan lihat nilai-nilai ini diperbarui secara langsung.
Breakpoint Tailwind CSS
Rentang yang sesuai dengan viewport Anda disorot saat Anda mengubah ukuran.
| Awalan | Lebar minimum | Berlaku mulai dari |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Kategori perangkat
Panel uji yang dapat diubah ukurannya
Seret sudut kanan bawah untuk mengubah ukuran panel ini. Panel ini melaporkan ukurannya sendiri dan breakpoint mana yang akan dikenai oleh lebar tersebut — pengukur responsif yang cepat.
Ukuran viewport perangkat umum
Perkiraan viewport piksel CSS potret sebagai referensi — nilai sebenarnya bervariasi menurut browser dan OS.
| Perangkat | Viewport (px CSS) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Alat terkait
Apa itu viewport
Viewport adalah area terlihat yang tersedia bagi halaman web untuk digambar — wilayah konten dari jendela browser Anda, tidak termasuk tab, bilah alamat, atau bilah bookmark. Itulah sebabnya viewport hampir selalu lebih kecil daripada resolusi layar Anda: layar adalah seluruh panel, sedangkan viewport hanyalah bagian yang bisa digunakan oleh halaman. window.innerWidth dan window.innerHeight melaporkan area tersebut dalam piksel CSS, sementara documentElement.clientWidth/clientHeight melaporkan viewport tata letak (area yang sama dikurangi lebar scrollbar klasik, jika ada). Karena viewport berubah seketika saat Anda mengubah ukuran, membagi layar, atau memutar perangkat, inilah angka yang sebenarnya direspons oleh tata letak responsif.
Piksel CSS vs piksel perangkat dan devicePixelRatio
Piksel CSS adalah satuan tata letak, bukan titik fisik pada panel. Pada layar standar, satu piksel CSS dipetakan ke satu piksel fisik, tetapi layar 'Retina' berkepadatan tinggi memadatkan dua atau tiga piksel fisik ke dalam setiap piksel CSS agar teks terlihat lebih tajam. window.devicePixelRatio memberi tahu Anda pengali tersebut: nilai 2 berarti viewport selebar 1440 piksel CSS digambar dengan 2880 piksel fisik. Halaman web ditata dalam piksel CSS, jadi ponsel yang melaporkan viewport selebar 390 piksel dengan DPR 3 memiliki panel fisik sekitar 1170 piksel. Untuk melihat resolusi fisik penuh dan kepadatan piksel layar Anda, gunakan alat What Is My Screen Size dan Screen Resolution Test.
Breakpoint responsif
Breakpoint adalah lebar viewport tertentu di mana tata letak berubah — kolom bertumpuk, menu menciut, ukuran huruf berubah. Media query CSS dan kerangka kerja utilitas seperti Tailwind CSS mendefinisikan sekumpulan kecil lebar bernama dan menerapkan gaya mulai dari lebar tersebut ke atas. Nilai bawaan Tailwind adalah sm pada 640px, md pada 768px, lg pada 1024px, xl pada 1280px, dan 2xl pada 1536px; di bawah 640px Anda berada pada rentang dasar tanpa awalan. Referensi di bawah ini menyoroti rentang yang aktif saat Anda mengubah ukuran, dan panel uji yang dapat diseret melaporkan breakpoint mana yang akan dikenai oleh lebarnya sendiri — cara cepat untuk melihat pratinjau perilaku komponen pada berbagai ukuran tanpa mengubah seluruh jendela Anda.
Mengapa innerWidth berbeda dari lebar layar
Ada beberapa hal yang berada di antara resolusi panel Anda dan viewport yang dilihat oleh sebuah halaman. Chrome browser (tab, toolbar, dan scrollbar yang terlihat) mengurangi area yang dapat digunakan. Zoom halaman juga mengubahnya: memperbesar tampilan mengurangi jumlah piksel CSS yang muat, sehingga innerWidth turun meskipun jendela tidak bergerak, dan ini juga sedikit mengubah devicePixelRatio. Di perangkat seluler, tag meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — memberi tahu browser untuk mengatur viewport tata letak sesuai lebar perangkat, alih-alih berpura-pura menjadi desktop selebar ~980px, itulah sebabnya situs responsif membutuhkannya. Penskalaan tampilan sistem operasi juga mengubah jumlah piksel CSS, itulah sebabnya dua monitor identik dapat melaporkan ukuran viewport yang berbeda.