Pro zjištění velikosti stránky nebo okna prohlížeče existuje několik postupů jak v nativním javascriptu tak i v různých knihovnách a frameworcích (např. jQuery). Každá ale vrací trochu jiné rozměry a je důležité vědět, který se dá k čemu použít.

Frameworky

Většina JS frameworků má nějaký způsob, jak jednoduše zjistit velikost okna, např.

//jQuery
var
    windowSize = {
        width: $(window).width(),
        height: $(window).height() 
    },
    documentSize = {
        width: $(document).width(),
        height: $(document).height() 
};
//ExtJS
var extBody = Ext.getBody().getViewSize(); 

To je sice pěkné, že jedním příkazem zjistíte velikost, ale je důležité vědět, co vám který příkaz vrací. Například v případě jQuery by výše uvedené příklady mohli implikovat, že první příkaz vrátí window.width (resp. window.innerWidth, protože width u window neexistuje) a v druhém případě document.width (tedy document.documentElement.clientWidth), ale to není pravda.

Když se totiž podíváte do kódu jQuery, zjistíte, že $(window).width() ve skutečnosti vrací document.documentElement.clientWidth a $(document).width() vrací buď scrollWidth, offsetWidth nebo clientWidth, podle toho, co je větší. To může mít fatální důsledky, pokud si například myslíte, že se ptáte na šířku okna bez scrollbarů, a ve skutečnosti se vám vrátí celá šířka obsahu stránky.

Velikost čeho vlastně?

Důležité je taky si uvědomit, jaké velikosti jsou ve hře a jaké z nich můžeme zjistit.

Zaprvé je to fyzické rozlišení obrazovky. To je v dnešní době u desktopů většinou 1920x1080px, u starších PC většinou 800×600 nebo 1024×768. U mobilních zařízení můžeme začít u 240×320 (první android telefony) a 480×320 (první iPhony) přes 800×480 (Android tablety, Windows Phone, apod.) a 960×640 (iPhone 4) až po 1080×1920 (HD androidy); a na veletrhu MWC 2014 byl již představen první 4k (tedy 3840x2160px) tablet od Qualcommu.

Zadruhé je to velikost prohlížeče, která na desktopu závisí na velikosti okna (Maximalizované vs. zmenšené) a velikosti okrajů (např. vzhled ve Windows, toolbary, apod.). U mobilních zařízeních pak závisí na velikosti taskbaru, toolbaru a dalších věcí, která zařízení zobrazují a zmenšují tak vlastní prostor pro stránku. Některé mobilní prohlížeče navíc umí přepínat do full-screen režimu.

Na nakonec, to, co nás zajímá nejvíc, je reálný počet pixelů, který nás nechá prohlížeč zobrazit na stránce. Ten závisí buď na tom, jak si ho nadefinujeme (viewport u Android) a nebo na tom, co nám zařízení (iPhone, Windows Phone, Android bez Viewport) povolí. Mobilní web je totiž dnes víceméně standardizovaný na šířku 320px, které používaly první iPhony (a pojem mobilní web rozšířily) a převzali to od nich první Androidy a Windows Phone 7+. V případě Android můžeme rozlišení změnit pomocí meta Viewport a hodnoty width=device-width, u iPhone 4+ pak můžete prohlížeč ošálit zobrazením obrázků na 50% velikosti a používání půl-pixelů u rozměrů (díky tomu využijeme plnou šířku 640px/920px i když prohlížeč hlásí jen 320px/480px podle natočení); u Windows Phone momentálně není způsob, jak zobrazit více než 320px, které prohlížeč hlásí jako šířku (nezávisle na natočení – u WP7 dokonce natočení ani nepoznáme).

Zatímco poslední hodnotu, tedy rozměr zobrazitelného obsahu, lze snadno zjistit přečtením příslušné vlastnosti (viz dále), tak rozlišení obrazovky nebo velikost okna lze zjistit jen pokud nám to prohlížeč dovolí (v některé z níže uvedených vlastností). Např. na většině desktopových prohlížečů lze přečíst vnější rozměr okna a rozlišení monitoru, na některých Androidech lze zjistit fyzické rozlišení obrazovky, ale nikdy se to nená zobecnit a spoléhat se na to.

Zjištění velikosti

Konečně k tomu, co všechno nám je prohlížeč ochoten o svém rozlišení říci:

pozn.: v příkladech budu pracovat se šířkou (width), ale pro každou vlastnosti šířky vždy existuje ekvivalentní vlastnost výška (height).

Nejčastěji používané v čistém JavaScriptu je window.innerWidth, která říká, jak široké je okno zevnitř a tudíž kolik prostoru je dostupného pro stránku.

var windowSize = {
    width: window.innerWidth,
    height: window.innerHeight
}

Tento rozměr ale často není vhodný, protože na desktopu nebere v úvahu posuvníky (scrollbary) – na jednu stranu vždy vrátí stejnou šířku a hlavně výšku, i když je stránka vyšší nebo širší (což je často potřeba), ale na druhou stranu vrací vždy stejnou výšku a hlavně šířku nezávisle na tom, zda jsou posuvníky zobrazeny (a často se tak okraj stránky „ztratí“ pod posuvníkem).

Opak je window.outerWidth, která vrací velikost okna zvenku.

var windowOuterSize = {
    width: window.outerWidth,
    height: window.outerHeight
}

Na desktopu je to dost často nepotřebné (kromě případu debugování nebo hackování, kde se tím dá zjistit rozlišení monitoru nebo počet toolbarů), ale u Androidů většinou vrací skutečné rozlišení a dá se tak využít k dynamické změně Viewport.

Pro zjištění správného rozměru okna (bez scrollbarů) je potřeba přečíst rozměry dokumentu, což se zjistí z vlastnosti document.documentElement.clientWidth.

var documentSize = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
}

Poslední dvě vlastnosti, které můžete z prohlížeče přečíst, jsou přímo určeny pro zjištění rozměrů obrazovky a pracovní plochy:

var
    monitorSize = {
        width: screen.width,
        height: screen.height 
    },
    desktopSize = {
        //velikost pracovní plochy
        // (např. bez nabídky Start,
        // lišty pro Gadgets, apod.)
        width: screen.availWidth,
        height: screen.availHeight 
}

Ostatní elementy

Stejně můžete zjistit rozměr jakéhokoliv prvku na stránce, pouze je potřeba použít jiné názvy vlastností:

1. offsetWidth = vlastní rozměr prvku (odpovídá CSS vlastnosti width)
2. scrollWidth = vnitřní rozměr, který odpovídá velikosti obsahu, pokud jsou zobrazeny scrollbary
3. clientWidth = vnitřní rozměr bez scrollbarů (tedy [offsetWidth – scrollbar-width])