Berapa Resolusi Layar Saya?

Spesifikasi tampilan kamu, terdeteksi secara instan — tanpa perlu membuka menu pengaturan

Penguji Viewport Responsif

Pilih preset lebar untuk melihat bagaimana konten menyesuaikan diri pada berbagai lebar viewport. Badge ukuran diperbarui secara langsung.

Lebar penuh
— px lebar pada preset ini
Catatan: iframe lintas-origin diblokir oleh sebagian besar situs. Kotak pratinjau ini hanya mensimulasikan lebar.

Referensi Breakpoint Desain

Breakpoint CSS umum yang digunakan oleh framework populer. Lebar viewport kamu saat ini disorot.

Nama Rentang Breakpoint Penggunaan Umum

Referensi Resolusi Layar Umum

Nama / Perangkat Resolusi Aspek DPR Perangkat Umum Kategori

User Agent Browser

Memuat…

Apa Artinya Semua Ini?

Resolusi Layar

Resolusi layar adalah jumlah total piksel yang dapat ditampilkan monitormu, dinyatakan sebagai lebar × tinggi (mis. 1920×1080). Ini adalah properti perangkat keras — tidak berubah kecuali kamu masuk ke pengaturan tampilan dan mengubahnya. Resolusi lebih tinggi = lebih banyak piksel = gambar lebih tajam dan lebih banyak konten yang muat di layar.

Rasio Piksel Perangkat (DPR)

DPR adalah rasio piksel fisik terhadap piksel CSS (logis). DPR 2 berarti setiap piksel CSS digambar menggunakan 2×2 = 4 piksel fisik, membuat segalanya tampak lebih tajam di layar Retina atau HiDPI. Sebagian besar smartphone modern memiliki DPR ≥ 2; banyak MacBook memiliki DPR = 2; beberapa ponsel Android memiliki DPR = 3 atau lebih.

Untuk pengembang web: gunakan @media (-webkit-min-device-pixel-ratio: 2) atau window.devicePixelRatio di JavaScript untuk menyajikan gambar beresolusi lebih tinggi ke layar HiDPI.

Viewport vs Resolusi Layar

Resolusi layarmu tetap (mis. 1920×1080). Viewport adalah area konten jendela browser — ia menyusut saat kamu mengubah ukuran browser, membuka chrome browser (DevTools, sidebar), atau memperbesar tampilan. CSS media queries merespons ukuran viewport, bukan resolusi layar. Ukuran viewport yang ditampilkan di sini diperbarui secara langsung saat kamu mengubah ukuran browser.

Kedalaman Warna

Kedalaman warna (dalam bit) menentukan berapa banyak warna berbeda yang dapat ditampilkan setiap piksel. 24-bit = 16,7 juta warna (True Color standar). 30-bit = 1,07 miliar warna (Deep Color, ditemukan di layar profesional). Sebagian besar monitor modern adalah 24-bit atau 30-bit.

Cara Memeriksa Resolusi Layar di Pengaturan Sistem

  • Windows 11: Klik kanan desktop → Pengaturan tampilan → Resolusi tampilan
  • macOS: Menu Apple → Pengaturan Sistem → Tampilan
  • Ubuntu/Linux: Pengaturan → Tampilan
  • Atau cukup lihat bagian atas halaman ini — tidak perlu membuka menu pengaturan.

Pertanyaan yang Sering Diajukan

Resolusi layarmu ditampilkan di kartu Resolusi Layar di bagian atas halaman ini. Ini terdeteksi secara otomatis oleh browsermu menggunakan API window.screen. Jika kamu memiliki layar Retina/HiDPI, baris Piksel Fisik menunjukkan jumlah piksel perangkat keras sebenarnya (resolusi layar × DPR).
DPR adalah berapa banyak piksel fisik yang membentuk setiap piksel logis CSS. DPR 1 = layar standar. DPR 2 = Retina (layarmu memiliki 4× piksel dari layar 1× dengan ukuran CSS yang sama). DPR 3 = ditemukan di banyak ponsel Android. DPR lebih tinggi berarti teks dan gambar lebih tajam, tetapi gambar perlu disajikan dengan resolusi lebih tinggi untuk mendapat manfaatnya.
Resolusi layar adalah total piksel yang dimiliki perangkat keras monitormu (tetap). Ukuran viewport adalah area jendela browser yang saat ini menampilkan konten web — berubah saat kamu mengubah ukuran browser, memperbesar/memperkecil tampilan, membuka/menutup DevTools, atau mengalihkan bilah alamat. CSS media queries merespons ukuran viewport, bukan resolusi layar. Viewport yang ditampilkan di sini diperbarui secara langsung saat kamu mengubah ukuran.
Klik kanan desktop → Pengaturan tampilan → gulir ke Resolusi tampilan. Atau tekan Win+I untuk membuka Pengaturan, lalu buka Sistem → Tampilan. Kamu juga bisa memeriksa bagian atas halaman ini — resolusimu langsung ditampilkan tanpa navigasi apa pun.
Menu Apple (kiri atas) → Pengaturan Sistem → Tampilan. Di bawah nama tampilanmu, kamu akan melihat resolusinya. Di macOS lama: Preferensi Sistem → Tampilan. Catatan: di Mac Retina, macOS mungkin menampilkan resolusi yang diskalakan (mis. Terlihat seperti 2560×1600) — ini adalah resolusi logis. Resolusi perangkat keras fisik adalah 2× lipat.