Penguji Ukuran Viewport & Breakpoint Responsif
Lihat seberapa besar jendela browser Anda sebenarnya ke halaman web. Alat ini membaca ukuran viewport Anda dalam piksel CSS, rasio piksel perangkat dan orientasi Anda, serta breakpoint responsif yang sedang Anda gunakan — memperbarui secara langsung saat Anda mengubah ukuran.
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× |
Viewport adalah area yang harus digambar oleh halaman web — jendela browser Anda dikurangi tab, bilah alamat, dan bilah gulir. Itulah sebabnya viewport hampir selalu lebih kecil dari resolusi layar Anda: layar adalah seluruh panel, sedangkan viewport hanyalah irisan yang dapat digunakan halaman. Ini diukur dalam piksel CSS, unit tata letak dan bukan titik fisik — tampilan 'Retina' berkepadatan tinggi mengemas dua atau tiga piksel fisik ke dalam setiap piksel CSS sehingga teks terlihat lebih tajam, dan window.devicePixelRatio melaporkan pengganda itu.
Alat ini membaca window.innerWidth dan window.innerHeight pada setiap perubahan ukuran dan orientasi, bersama dengan viewport tata letak dari documentElement.clientWidth/clientHeight, rasio piksel perangkat Anda, dan orientasi. Breakpoint adalah lebar viewport tempat tata letak berubah — kolom bertumpuk, menu menciut, ukuran teks berubah — dan kerangka kerja seperti Tailwind CSS menerapkan gaya dari sekumpulan lebar bernama ke atas. Referensi di bawah ini menyoroti rentang yang sesuai dengan lebar Anda, dan panel pengujian yang dapat diseret melaporkan breakpoint yang akan dikenai oleh lebarnya sendiri, sehingga Anda dapat melihat pratinjau komponen tanpa mengubah ukuran seluruh jendela Anda. Semuanya berjalan secara lokal; tidak ada yang diunggah.
Jika angka-angkanya terlihat salah, beberapa hal berada di antara resolusi panel Anda dan viewport yang dilihat halaman. UI browser dan bilah gulir mengurangi area yang dapat digunakan, dan zoom halaman mengecilkan jumlah piksel CSS — sehingga innerWidth turun tanpa jendela bergerak — seperti halnya penskalaan tampilan OS, itulah sebabnya dua monitor identik dapat melaporkan ukuran yang berbeda. Pada ponsel, tag meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, meletakkan halaman pada lebar perangkat alih-alih memalsukan desktop ~980px, sehingga viewport 390-px di DPR 3 berada di panel sekitar 1170 piksel fisik. Untuk melihat resolusi fisik penuh dan kerapatan piksel layar Anda, gunakan alat What Is My Screen Size dan Screen Resolution Test.
Breakpoint responsif umum
| Breakpoint | Lebar min | Perangkat khas dalam kisaran itu |
|---|---|---|
| base | 0px | Ponsel dalam potret (~360–430 CSS px lebar) |
| sm | 640px | Ponsel besar di lanskap, tablet kecil |
| md | 768px | Tablet dalam potret (iPad melaporkan 768 piksel) |
| lg | 1024px | Tablet di lanskap, laptop kecil |
| xl | 1280px | Laptop dan jendela desktop standar |
| 2xl | 1536px | Monitor desktop besar dan resolusi tinggi |