Rozlišení obrazovky ve webdesignu

Naposledy upraveno: 16. 8. 2018 – Autor: Martin Michálek

Rozlišení displeje z pohledu webaře moc zajímavé není, protože weby vykreslujeme a přizpůsobujeme velikosti okna prohlížeče. Nicméně – občas se to hodí a možnosti jak rozlišení změřit pochopitelně máme.

Obsah: Je to vůbec k něčemu?Zjištění JavaScriptemZjištění v CSSStatistiky rozlišení obrazovkyFull HD, 2K, 4K a další označení

Je to vůbec k něčemu?

Jak už jsem zmiňoval, zase tak zajímavé rozlišení displejů pro webaře není. Když jsem se na Twitteru ptal, zda takovou věc někdo potřeboval v praxi, dostal jsem jen pár příkladů. Většinou to lidé používali pro identifikaci uživatele:

…no a pak také pro různé prastaré obskurnosti:

Pro jistotu připomínám, že v responzivním designu je rozlišení obrazovky k ničemu. Vždy potřebujete znát velikost okna, protože právě tomu se design webu musí přizpůsobovat.

Zjištění JavaScriptem

Rozlišení obrazovky

Rozlišení obrazovky zjistíme:

screen.width
screen.height

U těchto hodnot pozor, budou vám na různých zařízeních vracet různá čísla. Například:

  • prohlížeče na iOS 9 a 10 vracejí vždy hodnoty pro kratší stranu (portrait),
  • Android 4 vrací hardwarové rozlišení,
  • Edge 14 vrací něco jako clientWidth a clientHeight, jen s rozměry posuvníku.

Zdroj: Tabulka kompatibility Petra Paula Kocha.

Dostupné rozlišení

Rozlišení obrazovky dostupné pro okna aplikací, obvykle tedy bez hlavního panelu operačního systému, zjistíme takto:

screen.availWidth
screen.availHeight

Na desktopu bývají obvykle hodnoty availWidth nebo availHeight trochu menší, na mobilech mívají obě kategorie – plné i dostupné rozlišení – stejné hodnoty.

Vyzkoušejte si to na CodePenu: cdpn.io/e/gjNpYg

Pozor, vše je v CSS pixelech

Připomínám, že veškerá čísla dostanete v CSS pixelech, nikoliv v hardwarovém rozlišení. Pokud byste chtěli hardwarové pixely, musíte násobit přepočítací hodnotou devicePixelRatio. Například:

window.screen.width * window.devicePixelRatio

Zjištění v CSS

Media Queries nabízí dotazy na šířku a výšku rozlišení obrazovky – min-device-width a min-device-height.

To jen pro pořádek. V CSS to ale je ještě méně užitečné než v JavaScriptu. Daleko zajímavější je cílit na velikost okna.

Při psaní článku jsem navíc zjistil, že se W3C tyto vlastnosti chystá odstranit ze specifikace. S tím se plně ztotožňuji. Můj zdroj je Mozilla Developer Network.

Statistiky rozlišení obrazovky

Web je plný statistik rozlišení displejů. Za červenec 2018 například Gemius uvádí následující pořadí:

Rozlišení Podíl
360 × 640 20.80 %
1366 × 768 15.63 %
1920 × 1080 13.47 %
1280 × 1024 4.58 %
1600 × 900 3.51 %

Nelze si nevšimnout, že zde chybí téměř polovina uživatelů. Ano, rozlišení obrazovky je dnes opravdu hodně a do krátkého tabulkového shrnutí se vám to nevejde.

Full HD, 2K, 4K a další označení

Tohle je často předmětem diskuzí, proto zde ještě pro pořádek zmíním zkratky, kterými se některá rozlišení označují:

Rozlišení Zkratka
1024 × 768 XGA/XVGA
1280 × 720 HD
1920 × 1080 Full HD
2048 × 1080 2K
3840 × 2160 4K

Zdrojem mi byla Wikipedie a Mobilmania kde těch krásných zkratek najdete ještě daleko více.

Platí to i pro rozlišení videa nebo pro televize, ale to už je trochu mimo náš obor, tedy pokud nás nezajímají HbbTV a chytré televize.

To je k rozlišení obrazovky vše. Daleko zajímavější je sledovat, s jak velkými okny prohlížeče uživatelé na vaše weby přistupují.

Komentáře