Cara menggunakan
- Buka halaman ini. Nilai dibaca langsung dari browser Anda.
- Ubah ukuran jendela atau putar perangkat untuk melihat ukuran dan orientasi viewport diperbarui.
- Gunakan “Salin semua” untuk menyalin detail ke laporan bug atau permintaan dukungan.
Cara kerja
Browser melaporkan ukuran dalam piksel CSS, satuan yang digunakan halaman web untuk tata letak. Pada layar berdensitas tinggi, satu piksel CSS digambar menggunakan beberapa piksel fisik: rasio piksel perangkat (DPR) menunjukkan jumlahnya. Ponsel yang melaporkan ukuran 390 × 844 dengan DPR 3 memiliki panel sekitar 1170 × 2532 piksel perangkat. Di komputer desktop, zoom browser dan penskalaan tampilan sistem operasi sama-sama mengubah DPR dan ukuran CSS. Karena itu, monitor 2560 × 1440 dengan penskalaan 125 % akan melaporkan ukuran 2048 × 1152.
Resolusi layar adalah keseluruhan tampilan; ruang layar yang tersedia tidak mencakup bilah sistem operasi permanen seperti taskbar Windows atau menu bar macOS; viewport adalah bagian jendela browser tempat halaman ditampilkan, tanpa toolbar tetapi termasuk scrollbar. CSS media query seperti min-width: 768px merespons ukuran viewport, jadi ukuran inilah yang perlu diperiksa saat menguji tata letak responsif.
Skema warna dan preferensi gerakan yang dikurangi berasal dari fitur media CSS yang sama dengan yang digunakan situs web untuk menyesuaikan tampilan dengan pengaturan sistem Anda. Merek, platform, dan perangkat seluler diambil dari User-Agent Client Hints, yang hanya tersedia di browser berbasis Chromium. Beberapa browser sengaja membulatkan atau menetapkan nilai-nilai ini untuk mengurangi fingerprinting, sehingga nilainya mungkin tidak sama persis dengan perangkat keras Anda.
Contoh
Menguji tata letak responsif
Tata letak bermasalah di laptop rekan kerja. Mereka menyalin detail perangkat, yang menunjukkan viewport 1280 × 649 dengan DPR 1.5. Atur toolbar perangkat browser ke viewport yang sama untuk mereproduksi masalahnya.
Menentukan ukuran gambar
Gambar produk ditampilkan selebar 400 piksel CSS. Pada ponsel dengan DPR 3, gambar memerlukan 1200 piksel agar terlihat tajam. Informasi ini membantu Anda menentukan ukuran yang perlu dicantumkan di srcset.
Memeriksa penskalaan monitor
Monitor 3840 × 2160 melaporkan ukuran 2560 × 1440 dengan DPR 1.5: artinya Windows menskalakan tampilan sebesar 150 %.
Pertanyaan yang sering diajukan
Mengapa resolusi layar berbeda dari spesifikasi monitor saya?
Browser melaporkan ukuran dalam piksel CSS, yaitu piksel fisik yang dibagi dengan faktor penskalaan. Kalikan dengan rasio piksel perangkat untuk mendapatkan perkiraan resolusi perangkat keras. Zoom browser juga mengubah nilai yang dilaporkan.
Apa perbedaan ukuran layar dan ukuran viewport?
Ukuran layar adalah keseluruhan tampilan. Viewport hanya area di dalam jendela browser tempat halaman digambar, jadi ukurannya lebih kecil dan berubah saat Anda mengubah ukuran jendela atau membuka alat developer.
Apakah informasi ini digunakan untuk melacak saya?
Tidak melalui halaman ini: nilainya hanya ditampilkan kepada Anda dan tidak disimpan atau dikirim ke mana pun. Situs web dapat membaca nilai yang sama, sehingga beberapa browser membulatkannya agar fingerprinting lebih sulit dilakukan.
Mengapa dukungan sentuh terdeteksi di laptop saya?
Dukungan sentuh ditentukan berdasarkan jumlah titik sentuh yang dilaporkan browser. Laptop dengan layar sentuh akan melaporkannya meskipun Anda lebih sering menggunakan mouse. Beberapa driver atau pengaturan desktop jarak jauh juga melaporkan dukungan sentuh tanpa adanya layar sentuh.
Privasi
Semua nilai dibaca oleh JavaScript di browser Anda dan hanya ditampilkan kepada Anda. Tidak ada yang disimpan, diunggah, atau disertakan dalam analitik; hanya peristiwa anonim yang mencatat bahwa alat dibuka dan digunakan.