Ukuran & Resolusi Layar Perangkat

Resolusi logis vs fisik dan DPR

Setiap layar modern memiliki dua resolusi. Resolusi fisik adalah jumlah piksel sesungguhnya yang tertanam pada panel — misalnya 1179 × 2556 pada iPhone 15. Resolusi logis (CSS) adalah ruang koordinat yang lebih kecil, tempat sebuah halaman web ditata, seperti 393 × 852. Device pixel ratio (DPR) adalah jembatan di antara keduanya: nilainya adalah resolusi fisik dibagi resolusi logis, sehingga DPR sebesar 3 berarti ponsel menggambar blok 3 × 3 piksel asli untuk setiap piksel CSS. Ponsel dan laptop berkerapatan tinggi “Retina” menggunakan DPR 2 atau 3 agar teks dan gambar tampil tajam, sementara monitor desktop pada umumnya memiliki DPR 1, di mana satu piksel CSS sama dengan satu piksel fisik.

Mengapa desainer bekerja dengan ukuran viewport

Saat membangun layout responsif, media query dan breakpoint CSS diukur dalam piksel CSS — yaitu viewport logis — bukan piksel fisik panel. Ponsel yang secara fisik lebarnya 1080 piksel tetap melaporkan viewport hanya 360–414 piksel CSS, itulah sebabnya breakpoint mobile 360px mencakup sebagian besar ponsel Android. Merancang berdasarkan viewport, bukan resolusi mentah, menjaga ukuran fisik teks dan target sentuh tetap konsisten di berbagai perangkat dengan kerapatan piksel yang sangat berbeda, sehingga layout yang sama terasa pas baik di laptop berkerapatan rendah maupun ponsel flagship berkerapatan tinggi.

Cara membaca tabel ini

• Viewport (px CSS) adalah ukuran logis yang dilihat oleh sebuah halaman web, dicantumkan dalam orientasi alami perangkat — potret untuk ponsel dan tablet, lanskap untuk laptop dan monitor.
• Resolusi fisik adalah jumlah piksel sesungguhnya pada panel, angka yang biasa dicantumkan pada lembar spesifikasi.
• DPR (device pixel ratio) mengalikan viewport hingga mencapai resolusi fisik; nilai di atas 1 menandakan layar berkerapatan tinggi.
• Rasio aspek adalah bentuk layar, mulai dari 19.5:9 yang memanjang pada ponsel modern hingga 16:9 pada kebanyakan monitor serta 21:9 dan 32:9 pada monitor ultrawide.
• Baris laptop dan 4K mencerminkan tingkat skala tampilan default yang umum, sehingga viewport bisa lebih kecil daripada resolusi asli panel.

Ukuran berubah di setiap model

Anggap angka-angka ini sebagai referensi praktis, bukan jaminan mutlak. Produsen merevisi dimensi layar hampir di setiap generasi — iPhone saja telah merilis viewport selebar 375, 390, 393, 402, 414, 430, dan 440 piksel CSS di berbagai model terbarunya — dan perangkat Android bervariasi jauh lebih luas lagi. Skala tampilan sistem operasi juga mengubah viewport yang dilaporkan: laptop Windows 1080p dengan skala 150% berperilaku seperti layar 1280 × 720 dengan DPR 1,5. Angka yang paling bisa diandalkan selalu yang dilaporkan oleh browser milikmu sendiri, itulah sebabnya perangkat yang cocok di atas dideteksi secara langsung dari layarmu.