Rozlišení obrazovky ve webdesignu

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í JavaScriptem – Zjištění v CSS – Statistiky rozlišení obrazovky – Full 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:

Jaká lidé používají rozlišení obrazovky, to nás nezajímalo. Ale rozlišení jsne společně s otiskem prohlížeče používali k rozpoznávání různých zařízení, kterými se tentýž člověk připojoval k účtu. Mohli jsme tak sledovat jeho chování cross-device. A to už bylo hodně zajímavé.

— Jan Štráfelda (@Strafelda) August 17, 2018

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

Počítajú sa hacky cca pred 20 rokmi (Netscape Navigator 4), kedy sme stránky zobrazovali vo fullscreene pomocou tzv. chromeless window a jeho roztiahnutia na celú obrazovku?

— Riki Fridrich (@fczbkk) August 16, 2018

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í.