Jak měřit pixely na obrazovce ve Windows
Krátká odpověď: Windows nemá pravítko na obrazovce. DevTools měří v prohlížeči, editory obrázků na svém plátně — pro všechno ostatní vezměte bezplatný nástroj, třeba Pravítko na obrazovce: zarovnejte nulovou hranu, přetáhněte značku, odečtěte vzdálenost v pixelech a okno položte jako ducha nad měřené rozhraní.
Proč měřit na obrazovce
- Psaní CSS: je ten postranní panel 320 px, nebo 300 px? Změřte místo hádání a nastavte breakpoint správně.
- Přístupnost: dotykové plochy by měly mít alespoň 44×44 px — pravítko ověří oba rozměry během sekund.
- Kontrola designu: porovnat rozestupy makety s živou stránkou, na úrovni pixelu, o kterém se designéři hádají.
- Prezentace a tisk: zjistit, jakou plochu může obrázek zabrat při rozlišení projektoru.
- Zvídavost s následky: „jak široké to okno vlastně je?“ — než pro něj něco napíšete.
Metoda 1: nástroje prohlížeče (jen v prohlížeči)
F12 → Prozkoumat → najeďte na libovolný prvek a uvidíte jeho box model. Ideální pro DOM — k ničemu pro přehrávač videa, desktopovou aplikaci, snímek obrazovky v prohlížeči obrázků nebo vaše vlastní okno.
Metoda 2: Pravítko na obrazovce — změří cokoli, kdekoli
Stáhnout zdarma — ScreenRuler-Setup.exe
- Zarovnejte nulu. Přiložte levou hranu pravítka (vodorovný režim) nebo horní hranu (svislý) tam, kde měření začíná.
- Přetáhněte linii značky na druhý konec; dolaďte šipkami — 1 px na stisk, Shift pro ×10. Tlačítko „Vynulovat značku“ ji vrátí na nulu.
- Udělejte z něj ducha: průhlednost na 40 % plus „Vždy navrchu“ položí průsvitné pravítko přímo na zkoumaný prvek. Odečtěte velkou hodnotu —
≈ 482 px.
Poznámky k přesnosti
Jedna jednotka pravítka je jeden pixel obrazovky — stejné px, kterým mluví CSS — při 100% škálování. Při vyšším škálování Windows je vše na obrazovce, včetně vašich měření, ve škálovaných pixelech; potřebujete-li neškálovaná čísla, porovnávejte při 100 %. Zoom prohlížeče mění, co měříte: měřte při 100% zoomu.
Časté dotazy
Můžu změřit úhlopříčnou vzdálenost?
Ne — změřte opsaný obdélník (šířku ve vodorovném režimu, výšku ve svislém): ten stejně používají layoutové systémy.
Funguje na každém monitoru a při každém škálování?
Okno se přesune na jakýkoli monitor a měří pixely té obrazovky; škálování se chová, jak je popsáno výše.
Čím se liší od cesty „snímek obrazovky + editor“?
Rychlostí a pravdou: žádný krok snímání, žádné chyby zoomu — měříte živou obrazovku přesně tak, jak je právě vykreslena.