Cara mengukur piksel di layar Windows

Jawaban singkat: Windows tidak punya penggaris di layar. DevTools mengukur di dalam browser, editor gambar di dalam kanvasnya — untuk semua hal lain, pakai alat gratis seperti Penggaris layar: sejajarkan tepi nol, seret penanda, baca jaraknya dalam piksel, lalu letakkan jendelanya sebagai hantu di atas antarmuka yang Anda ukur.

Mengapa ingin mengukur di layar

Menulis CSS: bilah samping itu 320 px atau 300 px? Ukur alih-alih menebak, lalu setel breakpoint dengan benar.
Aksesibilitas: area sentuh sebaiknya minimal 44×44 px — penggaris memeriksa kedua dimensinya dalam hitungan detik.
Uji desain: membandingkan jarak di mockup dengan halaman langsung, pada tingkat piksel yang diperdebatkan desainer.
Presentasi dan cetak: memeriksa berapa area yang bisa dipakai gambar pada resolusi proyektor.
Keingintahuan yang berakibat: «seberapa lebar sebenarnya jendela ini?» — sebelum membuat skrip untuknya.

Metode 1: alat browser (hanya di dalam browser)

F12 → Periksa → arahkan ke elemen mana pun untuk melihat box model-nya. Sempurna untuk DOM — tidak berguna untuk pemutar video, aplikasi desktop, tangkapan layar di penampil, atau jendela Anda sendiri.

Metode 2: Penggaris layar — mengukur apa pun, di mana pun

Unduh gratis — ScreenRuler-Setup.exe

Sejajarkan nol. Letakkan tepi kiri penggaris (mode horizontal) atau tepi atas (vertikal) di tempat pengukuran dimulai.
Seret garis penanda ke ujung lainnya; rapikan dengan tombol panah — 1 px per tekan, Shift untuk ×10. Tombol «Atur ulang penanda» mengembalikannya ke nol.
Jadikan hantu: transparansi ke 40 % plus «Selalu di atas» meletakkan penggaris tembus pandang tepat di atas elemen yang dimaksud. Baca nilai besarnya — ≈ 482 px.

Catatan akurasi

Satu unit penggaris adalah satu piksel layar — px yang sama yang dipakai CSS — saat penskalaan layar 100 %. Pada penskalaan Windows yang lebih tinggi, semua di layar, termasuk pengukuran Anda, dalam piksel terskala; jika butuh angka tanpa skala, bandingkan pada 100 %. Zoom browser mengubah apa yang Anda ukur: ukur pada zoom 100 %.

Pertanyaan umum

Bisakah saya mengukur jarak diagonal?

Tidak — ukur kotak pembatasnya (lebar pada mode horizontal, tinggi pada vertikal): itulah yang memang dipakai sistem tata letak.

Apakah berfungsi di monitor atau skala apa pun?

Jendelanya bisa dipindah ke monitor mana pun dan mengukur piksel layar itu; penskalaan berperilaku seperti dijelaskan di atas.

Apa bedanya dengan «tangkapan layar + editor»?

Kecepatan dan kebenaran: tanpa langkah menangkap, tanpa kesalahan zoom — Anda mengukur layar hidup persis seperti yang dirender saat ini.