Cara menggunakannya
- Buka halaman ini. Nilai dibaca daripada pelayar anda serta-merta.
- Ubah saiz tetingkap atau putarkan peranti anda untuk melihat saiz viewport dan orientasi berubah.
- Gunakan “Salin semua” untuk menampal butiran ke dalam laporan pepijat atau permintaan sokongan.
Cara ia berfungsi
Pelayar melaporkan saiz dalam piksel CSS, unit yang digunakan halaman web untuk susun atur. Pada paparan berketumpatan tinggi, satu piksel CSS dilukis dengan beberapa piksel fizikal: nisbah piksel peranti (DPR) memberitahu berapa banyak piksel. Telefon yang melaporkan 390 × 844 dengan DPR 3 mempunyai panel kira-kira 1170 × 2532 piksel peranti. Pada desktop, zum pelayar dan penskalaan paparan sistem pengendalian mengubah DPR dan saiz CSS, jadi monitor 2560 × 1440 pada penskalaan 125% melaporkan 2048 × 1152.
Resolusi skrin ialah keseluruhan paparan; ruang tersedia tidak termasuk bar sistem pengendalian kekal seperti bar tugas Windows atau bar menu macOS; viewport ialah bahagian tetingkap pelayar tempat halaman dipaparkan, tanpa bar alat tetapi termasuk sebarang bar skrol. Viewport ialah yang ditanggapi oleh media query CSS seperti min-width: 768px, jadi ia ialah nombor yang perlu disemak semasa menguji reka letak responsif.
Nilai skema warna dan reduced-motion datang daripada ciri media CSS yang sama yang digunakan oleh laman web untuk menyesuaikan diri dengan tetapan sistem anda. Jenama, platform dan mudah alih datang daripada User-Agent Client Hints, yang hanya disediakan oleh pelayar berasaskan Chromium. Sesetengah pelayar sengaja membundarkan atau menetapkan nilai ini untuk mengurangkan pengecaman cap jari, jadi nilai tersebut mungkin tidak sepadan tepat dengan perkakasan anda.
Contoh
Menguji reka letak responsif
Reka letak rosak pada komputer riba rakan sekerja. Mereka menyalin butiran, yang menunjukkan viewport 1280 × 649 pada DPR 1.5. Tetapkan bar alat peranti pelayar anda kepada viewport yang sama untuk menghasilkan semula masalah itu.
Memilih saiz imej
Imej produk dipaparkan selebar 400 piksel CSS. Pada telefon DPR 3, ia memerlukan 1200 piksel untuk kelihatan tajam, yang memberitahu anda saiz yang perlu disertakan dalam srcset.
Menyemak penskalaan monitor
Monitor 3840 × 2160 melaporkan 2560 × 1440 dengan DPR 1.5: Windows menskalakan paparan sebanyak 150%.
Soalan Lazim
Mengapa resolusi skrin berbeza daripada spesifikasi monitor saya?
Pelayar melaporkan piksel CSS, iaitu piksel fizikal dibahagikan dengan faktor penskalaan. Darabkan dengan nisbah piksel peranti untuk mendapatkan anggaran resolusi perkakasan. Zum pelayar juga mengubah nilai yang dilaporkan.
Apakah perbezaan antara saiz skrin dan saiz viewport?
Saiz skrin ialah keseluruhan paparan. Viewport hanyalah kawasan di dalam tetingkap pelayar tempat halaman dilukis, jadi ia lebih kecil dan berubah apabila anda mengubah saiz tetingkap atau membuka alat pembangun.
Adakah maklumat ini digunakan untuk menjejak saya?
Tidak melalui halaman ini: nilai hanya dipaparkan kepada anda dan tidak disimpan atau dihantar ke mana-mana. Laman web boleh membaca nilai yang sama, sebab itu sesetengah pelayar membundarkan nilai tersebut untuk menyukarkan pengecaman cap jari.
Mengapa sokongan sentuhan ditunjukkan pada komputer riba saya?
Sokongan sentuhan adalah berdasarkan bilangan titik sentuh yang dilaporkan oleh pelayar. Komputer riba dengan skrin sentuh melaporkannya walaupun anda lebih banyak menggunakan tetikus, dan sesetengah pemacu atau persediaan desktop jauh melaporkan sokongan sentuhan tanpa skrin sentuh.
Privasi
Semua nilai dibaca oleh JavaScript dalam pelayar anda dan hanya ditunjukkan kepada anda. Tiada apa-apa disimpan, dimuat naik atau dimasukkan ke dalam analitik; hanya satu peristiwa tanpa nama bahawa alat ini dibuka dan digunakan direkodkan.