Cek resolusi layar
Berapa resolusi layar saya – dan seberapa luas ruang yang benar-benar dipakai halaman web di jendela browser? Semua nilai diukur langsung di browser Anda dan diperbarui saat Anda mengubah ukuran jendela, memperbesar tampilan, atau memutar perangkat.
Cara menghitung
Pertanyaan “berapa resolusi layar saya?” punya lebih dari satu jawaban yang benar: piksel fisik layar, piksel CSS yang dipakai browser, dan viewport, yaitu ruang yang benar-benar tersedia untuk halaman web. Alat ini menampilkan semuanya berdampingan.
Arti setiap nilai
- Piksel fisik: ukuran layar dalam piksel CSS × devicePixelRatio. Laptop Full HD dengan skala 125% melaporkan 1536 × 864 piksel CSS – dikali 1,25 menjadi 1920 × 1080 yang sebenarnya.
- devicePixelRatio: berapa piksel fisik yang membentuk satu piksel CSS. 1 = monitor biasa, 2 atau 3 = layar Retina atau ponsel. Zoom browser dan skala tampilan Windows juga mengubah nilai ini.
- Area yang tersedia: layar tanpa taskbar atau Dock.
- Viewport: ukuran bagian dalam jendela browser (
innerWidth × innerHeight) – media query dan desain responsif mengikuti nilai ini. Area yang terlihat (visual viewport) lebih kecil saat Anda memperbesar dengan dua jari di ponsel atau saat keyboard terbuka. - Rasio aspek: bentuk yang disederhanakan secara tepat (1920 × 1080 = 16:9) dan nama umum untuk nilai yang tidak bulat (1366 × 768 ≈ 16:9).
- Breakpoint: tingkat mana yang berlaku pada lebar jendela saat ini untuk Bootstrap 5 (sm 576, md 768, lg 992, xl 1200, xxl 1400 px ke atas) dan Tailwind CSS (sm 640, md 768, lg 1024, xl 1280, 2xl 1536 px ke atas).
Cara melihat resolusi layar di pengaturan
- Windows 10 dan 11: Pengaturan → Sistem → Layar (Display) → Resolusi layar. “Skala” di halaman yang sama sesuai dengan devicePixelRatio.
- Mac: menu Apple → Pengaturan Sistem → Layar. Pada layar Retina, “resolusi” yang ditampilkan adalah ukuran tampilan (setara piksel CSS).
- HP Android dan iPhone: banyak perangkat tidak menampilkan resolusi di pengaturan – cukup buka halaman ini.
Resolusi yang umum
| Nama | Piksel | Rasio |
|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 |
| HD / WXGA | 1366 × 768 | ≈ 16:9 |
| Full HD (1080p) | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / WQHD (1440p) | 2560 × 1440 | 16:9 |
| UWQHD | 3440 × 1440 | ≈ 21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Batasan
Browser kadang membulatkan piksel CSS ke bawah, sehingga piksel fisik bisa sedikit meleset (2561 alih-alih 2560). Pada beberapa monitor, browser melaporkan layar tempat jendela sedang berada. Firefox dengan perlindungan sidik jari (resistFingerprinting) dapat sengaja melaporkan nilai standar.
Pertanyaan umum
Apa itu resolusi layar?
Resolusi layar adalah jumlah piksel yang ditampilkan layar, ditulis lebar × tinggi, misalnya 1920 × 1080 (Full HD). Makin tinggi resolusi pada ukuran layar yang sama, makin tajam gambar dan teks.
Bagaimana cara cek resolusi layar laptop atau PC?
Cukup buka halaman ini: di bagian atas tampil resolusi dalam piksel fisik, di bawahnya nilai piksel CSS dan ukuran jendela browser Anda. Di Windows, Anda juga bisa melihatnya di Pengaturan → Sistem → Layar → Resolusi layar.
Bagaimana cara cek resolusi layar HP?
Buka halaman ini di browser HP Android atau iPhone. Anda akan melihat piksel fisik, piksel CSS, dan devicePixelRatio (biasanya 2 sampai 3 di ponsel). Putar HP untuk melihat nilai potret dan lanskap.
Mengapa browser menampilkan 1536 × 864, bukan 1920 × 1080?
Karena skala Windows diatur ke 125% (atau zoom browser tidak 100%). Browser lalu bekerja dengan piksel CSS: 1920 ÷ 1,25 = 1536. Piksel fisik ditampilkan paling atas – piksel CSS × devicePixelRatio.
Apa beda resolusi layar dan viewport?
Resolusi layar adalah ukuran seluruh layar. Viewport hanya area dalam jendela browser, tanpa bilah tab, bilah alamat, dan taskbar. Dalam desain web dan media query, yang dipakai adalah viewport.
Apa arti devicePixelRatio 2 atau 3?
Layar Anda berkerapatan piksel tinggi (Retina): satu piksel CSS terdiri dari 2 × 2 atau 3 × 3 piksel fisik. Teks dan gambar tampak lebih tajam, sedangkan ukuran tata letak tetap sama.
Apakah data saya disimpan?
Tidak. Semua nilai hanya dibaca dan ditampilkan di browser Anda; tidak ada yang dikirim atau disimpan.
Sumber dan dasar hukum
- MDN Web Docs – Screen
- MDN Web Docs – Window.devicePixelRatio
- MDN Web Docs – Visual Viewport API
- MDN Web Docs – prefers-color-scheme
- Bootstrap 5.3 – Breakpoints
- Tailwind CSS – Responsive design
Diperbarui:
Alat terkait
- Cek user agent sayaCek user agent Anda: lihat browser, versi, engine, sistem operasi, jenis perangkat, dan Client Hints. Bisa juga mengurai user agent lain. Berjalan di browser.
- Cek IP address sayaCek IP address Anda secara instan: menampilkan IP publik Anda, mendeteksi apakah IPv4 atau IPv6, dan menjelaskan bedanya. Gratis, IP Anda tidak disimpan.
- Tes kamera: cek webcam AndaTes kamera gratis di browser: gambar langsung, resolusi dan frame rate asli, pilihan 480p hingga 4K, tampilan cermin, dan simpan foto. Tanpa upload apa pun.
- Tes keyboard: apakah semua tombol berfungsi?Tes keyboard online gratis: setiap tombol yang ditekan menyala dan tetap ditandai sudah dites. Menampilkan key, code dan location, plus cek ghosting.
- Cek dan hitung check digit dengan algoritma LuhnValidasi nomor dengan algoritma Luhn (mod 10, ISO/IEC 7812-1) atau hitung check digit-nya – hanya cek format, berjalan sepenuhnya di browser Anda.
- Base64 decode dan encode onlineBase64 decode dan encode online, termasuk Base64url dengan UTF-8 yang benar, serta URL encode/decode (percent-encoding). Pesan error jelas, berjalan di browser.