Cara menggunakan Resolusi Layar Saya
- Buka halaman, nilainya langsung muncul.
- Ubah ukuran jendela atau putar ponsel untuk melihat viewport berubah.
- Salin detailnya untuk dibagikan di laporan bug.
Resolusi layar vs viewport
- Resolusi layar adalah ukuran seluruh layar dalam piksel CSS (
screen.width × screen.height). - Viewport adalah area jendela browser yang tersedia untuk halaman (
innerWidth × innerHeight); inilah yang dipakai oleh CSS media queries. - Device pixel ratio (DPR) adalah jumlah piksel fisik per piksel CSS. Ponsel dengan DPR 3 dan viewport lebar 390 piksel sebenarnya memiliki 1170 piksel fisik secara horizontal.
Ukuran layar umum
| Jenis perangkat | Viewport CSS | DPR |
|---|---|---|
| iPhone modern | 390–430 × 844–932 | 3 |
| Ponsel Android | 360–412 × 780–915 | 2,6–3,5 |
| iPad | 768–1032 × 1024–1376 | 2 |
| Laptop | 1280–1536 × 720–960 | 1–2 |
| Monitor Full HD | 1920 × 1080 | 1 |
| Monitor 4K (diskalakan) | 1920–2560 × 1080–1440 | 1,5–2 |
Mengapa angkanya terlihat “salah”
Sistem operasi menskalakan tampilan: layar 4K dengan skala 150% melaporkan 2560 × 1440 piksel CSS dengan DPR 1,5. Zoom browser juga mengubah DPR, jadi zoom 200% membuat viewport menjadi setengahnya. Itu perilaku yang wajar, bukan kesalahan.
Untuk developer
Desain dengan piksel CSS dan uji lebar viewport yang umum (360, 390, 768, 1024, 1280, 1536). Sajikan gambar tajam untuk layar DPR tinggi dengan srcset dan ubah ukurannya dengan image resizer. Tipografi fluid dengan clamp() calculator menghindari breakpoint untuk ukuran font sama sekali.
Juga dicari sebagai: ukuran layar, ukuran viewport, cek resolusi layar, device pixel ratio, ukuran jendela browser, resolusi layar saya berapa.
Tool yang cocok dipakai bersama Resolusi Layar Saya
- Cek IP Address Saya — IP address publik kamu dan semua informasi yang diperlihatkan browser ke situs yang kamu kunjungi: user agent, layar, bahasa, zona waktu, dan header permintaan.
- Parser User Agent — Uraikan string User-Agent menjadi browser, engine, sistem operasi, dan perangkat, lalu cek apakah string itu berasal dari mesin pencari, crawler AI, atau script.
- Kalkulator Aspect Ratio — Ubah ukuran gambar dan video tanpa distorsi: isi rasio dan satu sisi untuk mendapatkan sisi lainnya, atau masukkan ukuran untuk mencari rasionya, lengkap dengan CSS siap tempel.
- Konverter PX ke REM — Konversi antara pixel, rem, dan em dengan ukuran font root kamu sendiri, atau tempel seluruh stylesheet dan ubah semua nilai px sekaligus.
Pertanyaan yang sering diajukan
Mengapa monitor 4K saya menampilkan resolusi yang lebih kecil?
Karena penskalaan tampilan. Windows dan macOS memperbesar semuanya, sehingga browser melaporkan ukuran yang sudah diskalakan dalam piksel CSS. Kalikan dengan device pixel ratio untuk mendapatkan resolusi fisik.
Apa perbedaan antara ukuran layar dan viewport?
Viewport tidak termasuk toolbar, tab, dan batas jendela browser. Itulah ruang yang benar-benar didapat halaman web.
Apakah informasi ini dikirim ke suatu tempat?
Tidak. Informasi ini dibaca oleh browser kamu dan hanya ditampilkan di halaman ini.
Bisakah saya memasang Resolusi Layar Saya sebagai aplikasi web dan memakainya offline?
Bisa. Resolusi Layar Saya adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.