Penggaris Pixel Gratis
Ukur jarak dalam piksel di layar Anda.
Cara menggunakan
- Klik dan seret pada penggaris untuk mengukur jarak. Penggaris menampilkan kenaikan dalam piksel.
- Titik awal dan akhir dapat dipindah, pegang untuk menyesuaikan pengukuran.
- Aktifkan mode vertikal untuk mengukur jarak vertikal alih-alih horizontal.
- Lihat jumlah piksel Anda dan perkiraan ukuran fisik di bawah penggaris.
Pertanyaan umum
Seberapa akurat kalkulasi ukuran fisik?
Ukuran fisik didasarkan pada rasio piksel perangkat Anda dan asumsi DPI 96. DPI monitor sebenarnya bervariasi, jadi ini adalah perkiraan. Untuk pengukuran yang tepat pada dokumen cetak, gunakan penggaris fisik.
Bisakah saya mengukur jarak vertikal?
Ya. Aktifkan mode vertikal untuk mengukur jarak vertikal dalam piksel alih-alih horizontal.
Apa arti rasio piksel perangkat?
Layar dengan kepadatan tinggi (seperti layar Retina) memiliki rasio piksel di atas 1, artinya beberapa piksel fisik mewakili satu piksel CSS. Alat ini mengukur dalam piksel CSS.
Apa yang Diukur Penggaris Ini (dan Apa yang Tidak)
Ini adalah alat ukur bentuk bebas yang hidup di dalam tab browser Anda. Seret melintasi kanvas di atas untuk mendapatkan pembacaan piksel CSS. Ini bekerja pada apa saja yang dilukis di dalam viewport browser (screenshot yang dibuka dalam tab, ekspor Figma yang dilihat secara inline, halaman web langsung di tab kedua) tetapi tidak dapat mengukur jendela desktop, UI aplikasi native, taskbar, atau apa pun yang dilukis oleh kompositor tingkat OS di luar browser. Ini juga tidak dapat mendeteksi batas elemen secara otomatis seperti yang dapat dilakukan Chrome DevTools atau Page Ruler Redux. Itu adalah jenis alat yang berbeda. Framing yang jujur: penggaris ini adalah jawaban yang tepat ketika Anda menginginkan pengukuran cepat tanpa instalasi di dalam browser.
Piksel CSS bukan titik perangkat keras
Piksel yang digunakan JavaScript dan CSS adalah piksel referensi yang didefinisikan W3C: «sudut visual satu piksel pada perangkat dengan kerapatan piksel perangkat 96 dpi dan jarak dari pembaca sepanjang lengan.» Untuk panjang lengan nominal sekitar 28 inci, sudut visual tersebut kira-kira 0,0213°, atau sekitar 0,26 mm di permukaan layar. Piksel CSS adalah satuan sudut visual, bukan titik perangkat keras, sengaja dibuat independen dari perangkat agar font 16 px tampak kira-kira berukuran fisik yang sama di ponsel, laptop, dan TV.
Semua panjang CSS absolut lainnya berlabuh padanya: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Tabel konversi tetap tersebut adalah tepatnya apa yang membuat pembacaan «mm pada 96 DPI» sebagai estimasi bukan pengukuran sesungguhnya, lihat di bawah.
Tiga Kata Piksel yang Membingungkan Desainer
| Istilah | Apa yang dihitung | Di mana ia berada |
|---|---|---|
| Piksel CSS | Piksel referensi W3C; satuan yang digunakan JS dan CSS untuk tata letak | window.innerWidth, getBoundingClientRect(), setiap panjang CSS |
| Piksel perangkat | Titik yang benar-benar dapat ditangani di panel | screen.width × devicePixelRatio, resolusi native monitor |
| Piksel gambar | Resolusi intrinsik sebuah file raster | naturalWidth / naturalHeight pada <img> |
Hubungan dalam satu kalimat: resolusi fisik layar ≈ ukuran viewport CSS × rasio piksel perangkat, dan gambar tajam membutuhkan lebar intrinsik ≥ lebar CSS yang dirender × DPR. Logo berukuran CSS 100 px pada ponsel dengan DPR 3 membutuhkan setidaknya gambar sumber selebar 300 piksel agar terlihat tajam.
Rasio piksel perangkat
Pembacaan DPR di panel info melaporkan window.devicePixelRatio: «nisbah resolusi dalam piksel fisik terhadap resolusi dalam piksel CSS untuk perangkat tampilan saat ini.» Nilai umum:
- 1,0: tampilan 96 DPI klasik (monitor lama, mesin Windows pada skala 100%).
- 2,0: sebagian besar MacBook Retina, banyak monitor 4K pada skala 200%.
- 2,5-3,5: ponsel modern. Model iPhone Pro melaporkan 3,0; flagship Android sering berada di 2,625 / 2,75 / 3,5.
Dua perilaku yang perlu diketahui: zoom halaman (Ctrl/Cmd + dan −) memang mengubah DPR, sehingga pembacaan akan melompat saat Anda zoom. Pinch-zoom memperbesar viewport yang dirender tanpa mengubah ukuran piksel CSS yang mendasarinya, jadi tidak demikian. Apple memperkenalkan layar Retina pada iPhone 4 pada tahun 2010, dan agar aplikasi dan halaman yang ada tidak menyusut menjadi seperempat dari ukuran sebelumnya saat piksel perangkat berlipat dua di kedua dimensi, iOS memperkenalkan «titik» (setara piksel CSS-nya). Web mewarisi model yang sama: piksel CSS 2× dipetakan ke empat piksel perangkat.
Standar ukuran target tap
Salah satu hal paling berguna yang dilakukan penggaris piksel adalah memverifikasi bahwa tombol, tautan, dan ikon memenuhi minimum target tap aksesibilitas. Tiga standar biasanya muncul bersama:
| Sumber | Minimum | Satuan | ~Fisik (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6,4 × 6,4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11,6 × 11,6 mm |
| Apple HIG | 44 × 44 | pt | ~11,6 × 11,6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (referensi 160 dpi) |
WCAG 2.2 menambahkan kriteria AA 24 × 24 pada Oktober 2023. Frase uji kesesuaian W3C: «Harus secara konseptual mungkin untuk menggambar kotak piksel CSS padat berukuran 24 kali 24 … sepenuhnya di dalam target.» Ada lima pengecualian (spasi, setara, inline, kontrol agen-pengguna, esensial), tetapi secara umum UI isi perlu memenuhi batas tersebut. Kriteria AAA yang lebih lama (2.5.5) membutuhkan 44 × 44, sesuai dengan HIG Apple dan kira-kira sesuai dengan 48 dp Material.
Grid desain 8-piksel
Sebagian besar desain UI modern didasarkan pada unit basis 8-piksel («grid 8-titik» atau «grid 8 dp» tergantung platform). Material Design 2 dan 3 keduanya dibangun di atasnya, dengan penyesuaian 4 dp lebih kecil untuk ikon dan komponen padat. Pilihan 8 bukan kebetulan: ia terbagi bersih menjadi lebar layar umum (320, 360, 375, 1.280, 1.440), ia berskala dengan rasio bilangan bulat (8, 16, 24, 32, 40, 48), dan secara alami berpasangan dengan tipe isi default 16 px. Sub-grid 4-piksel menangani penyelarasan halus.
Penggunaan praktis: saat Anda mengukur celah sebagai 14 px atau 17 px, kemungkinan Anda telah menangkap kesalahan satuan CSS. Nilai yang dimaksud hampir pasti adalah 16. Penggaris piksel adalah cara tercepat untuk menemukan spasi yang tidak sesuai grid.
Kapan Anda akan menggunakan penggaris browser
- QA desain pada halaman yang sudah dirilis. Bandingkan hasil langsung dengan spesifikasi. Apakah celah antara dua kartu 16 px atau 24 px?
- Verifikasi target tap. Letakkan penggaris di atas tombol untuk mengonfirmasi memenuhi lantai AA 24 px atau target AAA 44 px.
- Audit spasi pada mockup yang ditempel. Buka ekspor Figma di tab, letakkan penggaris di atasnya, periksa ritme.
- Pemeriksaan kewarasan breakpoint responsif. Pembacaan Lebar Viewport berfungsi ganda sebagai indikator breakpoint langsung saat Anda mengubah ukuran jendela.
- Pendidikan. Tunjukkan kepada developer junior apa yang dilaporkan
devicePixelRatiodi mesin mereka sendiri, dan bagaimana itu berubah saat mereka menekan Cmd/Ctrl + untuk zoom. - Audit aksesibilitas. Verifikasi area hit tombol-ikon, panjang baris dalam piksel CSS, dan ukuran teks minimum.
Browser DevTools dan penggaris lainnya
Setiap browser modern hadir dengan tooling pengukuran, tetapi tersembunyi di balik panel developer.
- Chrome DevTools: buka Command Menu (Cmd/Ctrl+Shift+P), ketik «rulers», pilih Show rulers on hover. Penggaris muncul di sepanjang atas dan kiri viewport saat Anda mengarahkan kursor ke elemen. Terikat ke pemilihan elemen daripada seret bebas.
- Firefox DevTools: Pengaturan → Tombol Toolbox yang Tersedia → aktifkan Toggle rulers for the page. Tombol toggle penggaris muncul di toolbar DevTools; penggaris di-overlay pada tepi halaman dengan dimensi viewport di kanan atas.
- Figma / Sketch / Adobe XD: semuanya memiliki overlay penggaris di dalam kanvas mereka. Figma menggunakan Shift+R untuk toggle. Ini terikat ke file: mereka mengukur di dalam model dokumen mereka sendiri, bukan halaman web yang di-deploy.
- Ekstensi browser: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Semuanya memerlukan instalasi dan izin; semuanya terbatas pada browser. Berguna jika Anda memerlukan deteksi elemen otomatis.
Penggaris tab browser seperti ini adalah jawaban bagi desainer, peninjau QA, dan staf konten yang menginginkan satu klik daripada panel DevTools atau instalasi ekstensi.
Pertanyaan lainnya
Seberapa akurat pembacaan milimeter?
Ini adalah estimasi. Konversi menggunakan hubungan tetap W3C 1 inci = 96 piksel CSS, yang akurat hanya ketika monitor Anda benar-benar 96 DPI, zoom browser adalah 100%, dan skala OS adalah 100%. Monitor sebenarnya sangat bervariasi: panel 24 inci 1080p berjalan kira-kira 92 ppi, panel 27 inci 1440p sekitar 109 ppi, panel 27 inci 4K sekitar 163 ppi. Perlakukan angka mm sebagai estimasi orde besar, bukan pengukuran kelas cetak. Untuk ukuran fisik sesungguhnya, tempelkan penggaris fisik ke layar.
Mengapa rasio piksel perangkat berubah saat saya zoom?
Zoom halaman (Cmd/Ctrl + atau −) secara harfiah mengubah ukuran piksel CSS relatif terhadap piksel perangkat, sehingga rasio di antara keduanya bergeser. Pinch-zoom pada perangkat sentuh bekerja secara berbeda. Ini memperbesar viewport yang dirender tanpa mengubah ukuran piksel CSS yang mendasarinya, sehingga tidak menggeser DPR.
Mengapa 1366 × 768 tidak tepat 16:9?
Karena memang tidak. 1366 ÷ 768 = 1.7786; 16:9 sejati adalah 1.7778. Rasio yang disederhanakan sebenarnya adalah 683:384. Banyak panel laptop murah menggunakan resolusi yang sedikit di luar spesifikasi ini, yang menjadi salah satu alasan video 1080p kadang-kadang di-downscale dengan tidak sempurna pada mereka.
Bisakah saya mengukur di luar browser?
Tidak. Halaman web hanya dapat melihat dan melukis di dalam tab browsernya sendiri. Untuk mengukur jendela desktop, UI aplikasi native, atau apa pun di luar browser, Anda memerlukan utilitas tingkat OS: «Show Inspector» macOS Preview, Snipping Tool Windows dengan overlay dimensi, atau penggaris layar pihak ketiga.
Apakah ada yang dikirim ke server?
Tidak. Penggaris dirender dengan HTML5 Canvas API; dimensi viewport dan DPR berasal dari JavaScript secara lokal; pembacaan pengukuran dihitung di browser Anda. Halaman ini berfungsi secara offline setelah dimuat.