HTML & CSS

Rozměry displeje a okna

(window.innerWidth × Height)
(window.outerWidth × Height)
(window.devicePixelRatio)
(window.screen.availWidth × Height)
(window.screen.availWidth × Height)
(physical size)
(window.screen.colorDepth, window.screen.pixelDepth)

Velikost pixelu používaného v HTML a CSS je 96 pixelů na palec. Pro kdysi používané displeje 640 × 480 (VGA) by to odpovídalo 6⅔ × 5″ = 169⅓ × 127 mm, tedy úhlopříčce 800px = 8⅓″ = 211⅔ mm, případně pro 800 × 600 (SVGA) by to bylo 8⅓ × 6¼″ = 211⅔ × 158¾ mm a úhlopříčce 1000px = 10 5/12″ = 264 7/12 mm.


Dnešní displeje, zejména na noutbůcích především na smartfounech, mají mnohem menší pixely a byly by tedy čitelné jen zblízka se silnými brýlemi nebo lupou. Proto byl zaveden koeficient, který přepočítává fyzické pixely daného zařízení na "css-pixely" a tím zvětšuje zobrazenou stránku.

Například notebook s FullHD displejem 1920 × 1080 používá devicePixelRatio 1.25, takže se chová jako by měl jen 1536 × 864.

Smartphone s FullHD displejem 1920 × 1080 může mít devicePixelRatio 2, takže se chová jako by měl 960 × 540.


Kromě toho existuje ještě další přepočet, který je volen podle obsahu stránky. Proto můžeme někdy, zejména při orientaci displeje na výšku, vidět, že vnitřní rozměry okna jsou větší než vnější, protože ty vnitřní jsou udány v tomto třetím druhu pixelů.

Tento přepočet může autor stránky ovlivnit nastavením její šířky. (My zde používáme šířku 576px = 432pt = 6in = 152.4mm, což je 60 znaků dvanáctibodovým Courierem nebo jiním písmem vhodné velikosti.) V hlavičce je udáno, jakou šířku má mít vnitřní rozměr okna:
<meta name="viewport" content="width=576" />
a ve stylu je podle toho nastavena maximální šířka těla:
<style> body {max-width: 6in} </style>

HTML & CSS