—

Fyzické rozlišení

—

CSS rozlišení

—

Device Pixel Ratio

—

Viewport

—

Orientace

—

Poměr stran

Všechny parametry

screen.width

—

Fyzická šířka displeje

screen.height

—

Fyzická výška displeje

screen.availWidth

—

Dostupná šířka (bez taskbaru)

screen.availHeight

—

Dostupná výška (bez taskbaru)

innerWidth

—

Šířka viewport (CSS px)

innerHeight

—

Výška viewport (CSS px)

outerWidth

—

Šířka okna prohlížeče

outerHeight

—

Výška okna prohlížeče

devicePixelRatio

—

Fyzické px / CSS px

screen.colorDepth

—

Barevná hloubka

screen.pixelDepth

—

Hloubka pixelů

maxTouchPoints

—

Touch body

Bootstrap / Tailwind breakpointy

K čemu je Rozlišení obrazovky

Tento nástroj ocení hlavně webaři, frontend vývojáři a grafici, kteří potřebují rychle zjistit přesné parametry displeje – ať už svého vlastního, nebo zařízení, které testují. Místo toho, aby sis šel proklikávat systémové nastavení Windows nebo macOS, dostaneš všechno na jednom místě okamžitě po načtení stránky.

Reálný problém, který to řeší: píšeš CSS media queries, ladíš responzivní layout nebo děláš screenshot pro klienta – a potřebuješ vědět, jaké fyzické rozlišení máš k dispozici, jaký je viewport prohlížeče a jaký device pixel ratio (DPR) tvůj displej používá. Právě DPR je věc, na kterou se při ručním hledání snadno zapomene, přitom je klíčová třeba při přípravě @2x grafiky nebo srcset atributů.

Nástroj nezobrazuje jen jedno číslo. Ukáže ti fyzické rozlišení displeje, CSS rozlišení (logické pixely), DPR i aktuální velikost viewportu prohlížeče – to jsou čtyři různé hodnoty, které se často pletou dohromady.

Co dostaneš

Fyzické rozlišení displeje – skutečný počet hardwarových pixelů
CSS rozlišení (logické pixely) – rozlišení, se kterým pracuje prohlížeč a CSS
Device Pixel Ratio (DPR) – kolik fyzických pixelů odpovídá jednomu CSS pixelu
Velikost viewportu – aktuální šířka a výška zobrazované plochy v prohlížeči
Vše bez zadávání čehokoliv – hodnoty se načtou automaticky

Jak to funguje

Otevři nástroj v prohlížeči na zařízení, jehož parametry chceš zjistit.
Stránka automaticky přečte data přímo z prohlížeče – žádné zadávání, žádné formuláře.
Zkontroluj zobrazené hodnoty: fyzické rozlišení, CSS rozlišení, DPR a viewport.
Pokud testuješ responzivní design, změň velikost okna prohlížeče – viewport se aktualizuje.
Hodnoty si zkopíruj nebo poznamenej pro práci v CSS, Figmě nebo pro reportování klientovi.

Časté otázky

Proč se fyzické rozlišení liší od CSS rozlišení?

Moderní displeje (Retina, HiDPI) mají vysokou hustotu pixelů, ale prohlížeč pracuje s logickými pixely, aby text a prvky nevypadaly miniaturně. DPR říká, jaký je poměr – třeba DPR 2 znamená, že na jeden CSS pixel připadají 2 fyzické pixely v každém směru.

Jak nástroj data získává – odesílá něco na server?

Vůbec ne. Všechno čte přímo z prohlížeče pomocí JavaScriptu (window.screen, window.devicePixelRatio, window.innerWidth). Na žádný server se nic neodesílá.

K čemu mi je hodnota DPR v praxi?

Hlavně při přípravě obrázků pro web. Pokud máš DPR 2, potřebuješ obrázky ve dvojnásobném rozlišení, aby byly ostré. Při řešení srcset atributů ti pomůže i nástroj srcset / Responsive Image.

Mohu takhle zjistit rozlišení mobilu?

Ano – otevři nástroj na daném zařízení a uvidíš jeho konkrétní hodnoty. Alternativně to jde přes Chrome DevTools, ale pro rychlé ověření na fyzickém zařízení je tohle rychlejší. Pro orientaci o tom, jaká zařízení tě navštěvují, se hodí Google Analytics nebo podobné nástroje.

Rozlišení obrazovky