Je viac spôsobov ako zistiť rozmery stránky. Podľa situácie ti môžu dať rôzne výsledky. Je dobré vedieť, čo ktorý znamená a ako sa za každej situácie dopracovať k tomu správnemu. Obzvlášť sa to hodí, keď niečím potrebuješ prekrývať celú stránku: napr. u javascriptových modálnych dialógov, galérií typu lightbox a pod.
Základné pojmy
Časť okna prehliadača, v ktorej sa zobrazuje webová stránka je viewport. Súčasťou viewportu nie sú toolbary ani sidebary, dokonca ani scrollbary. Viewport je proste plocha v ktorej je zobrazená stránka a nič viac.
Telo dokumentu (document.body) je plocha, ktorú zaberá obsah stránky. Jeho výška sa rovná pozícii spodného okraju najnižšie položeného elementu na stránke (obdobne je definovaná šírka).
Pár faktov, ktoré si treba pri zisťovaní veľkosti stránky uvedomiť:
- Ak je nejaký rozmer viewportu menší než rozmer tela dokumentu, bude stránka scrolovať.
- Telo dokumentu sa automaticky nerozťahuje na rozmery viewportu. Ich šírka sa obvykle zhoduje (pretože blokové elementy majú defaultne šírku 100%). Ale výška je obvykle rôzna.
Možné problémy
Ak je viewport menší než telo dokumentu, ty stránku prekryješ elementom s rozmermi viewportu a užívateľ odskroluje nižšie, uvidí neprekrytý obsah. Samozrejme, môžeš to ošetriť tak, že pri zobrazení prekrývajúceho elementu zakážeš skrolovanie. Akurát si to však skomplikuješ: Schovanie scrollbarov ti zmení veľkosť viewportu. A zakázanie skrolovania kolečkom rozhodne nie je triviálna záležitosť.
Ak je telo dokumentu menšie než viewport a ty stránku prekryješ elementom s veľkosťou tela dokumentu, bude ti dole vyčuhovať neprekrytá plocha. Síce bude prázdna a nebude v nej žiadny klikací element, ale asi to nebude vyzerať úplne košer (hlavne ak je pozadie BODY iné než pozadie prekrývajúceho elementu.
Čo s tým?
Je to jednoduché. Treba hrať na istotu. Stačí si zistiť obidva údaje a použiť vždy tú vyššiu hodnotu. V Prototype sa to dá takto jednoducho (v ostatných knižniciach to bude obdobné):
document.getPageSize = function () {
var viewportSize = document.viewport.getDimensions();
var bodySize = $( document.body ).getDimensions();
return {
width : ( viewportSize.width > bodySize.width ) ? viewportSize.width : bodySize.width,
height : ( viewportSize.height > bodySize.height ) ? viewportSize.height : bodySize.height
};
}
Použitie je jednoduché. Stačí sa opýtať na document.getPageSize(), ktorá vráti objekt s hodnotami width a height v pixeloch:
{ width : x, height: y }
