Zisťovanie veľkosti viewportu

Rozdiel medzi veľkosťou desktopu (plochy) GUI operačného systému a veľkosťou viewportu pre zobrazenú stránku v prehliadači sme už vďaka Spravodaju dokonale zvládli. Kto nie, tak ide o fakt, že veľkosť desktopu nemá naozaj žiadny súvis s rozmermi plochy do ktorej sa stránka zobrazí. Naozaj ŽIADNY.
Tentoraz si však spravíme praktické cvičenie, kde skúsime ukázať ako by ste mohli odhadnúť na akú šírku sa to vlastne tá stránka vyrenderovala v okne prehliadača.

Všetci vieme, že Toplist, Navrcholu a ďalšie meradlá s obľubou používajú *kód pre zistenie veľkosti desktopu.* Toto číslo ani *zďaleka nič nenapovie.* Povie iba to, že najviac návštev bolo z počítačov s nastavenými rozmermi desktopu. Nepovie ale, že to možno boli iba ľudia, ktorí vidia stránku bez problémov a preto si ju obľúbili a tí, ktorí uvideli chaos to vzdali a už na ňu zabudli. *Nepovie koľko skutočne ľudí má naozaj taký desktop.* Nedá sa takmer vôbec odvodiť hodnoverná súvislosť a závislosť štatistikových čísiel so skutočnosťou.
Omnoho lepšie je buď premýšľať v pásmach (od ktorej hodnoty sa moja stránka začne zobrazovať prijateľne až po akú hodnotu). Následne sa ešte môžem rozhodnúť, čo s hodnotami mimo pásmo (kašlem na ne, vypnem layout alebo čo vlastne urobím).
Pretože okrem počítadlového merania veľkosti desktopu *je možné „zmerať“ aj rozmery viewportu,* tak si to môžeme odskúšať. Vopred upozorňujem, že tieto operácie nemajú oporu v doporučeniach W3C (mimochodom, všetci odvolávači na štandardy sa odvolávajú na niečo, čo neexistuje) a preto sú implementácie svojskejšie ako rozporné chápanie box modelu. Pre naše účely to však nemusí príliš vadiť.
Nevadí to asi aj preto, že *potrebujeme vedieť iba ZHRUBA akú šírku má viewport* (skutočná šírka stránky) v prehliadači návštevníka. Ide nám totiž iba o to, či sa dostaneme do istého pásma prijateľnosti jeho prostriedkov.
Uvažujme situáciu, že nám záleží na tom, aby v prípade podpory javascriptu, dostal čitateľ stránku čo najlepšie vyhovujúcu jeho viewportu. Pokiaľ javascript nemá, tak sa musí spoľahnúť na naše pásmo prijateľnosti (či sa doň dostal). Predpokladáme, že stránka je v rozmedzí pásma prijateľnosti bez problémov prehliadateľná (minimálne hlavná časť obsahu je dostupná a nenarušená). Pre prípady mimo pásma resp. v na hraniciach sme sa rozhodli prispôsobovať zobrazenie stránky práve zistením šírky viewportu (extrémisti aj výšky) a modifikujeme layout podľa týchto hodnôt.
Nakoniec predpokladáme, že Vaše defaulty (bez reptania vyrábate) pre výrobu stránok sú samostatné CSS pre media print, media handheld (a samozrejme media screen) s tým, že bezpodmienečne ovládate maxwidth minwidth aj s ich implementáciou pre IE.
Zisťovanie veľkosti desktopu a viewportu je možné v javascripte použitím:
window.screen.availWidth – veľkosť desktopu!!!
window.innerWidth – nefunguje v IE. Opera a FF ukazujú mierne vyššie hodnoty ako skutočné
document.body.clientWidth – v IE a Opere zobrazí skutočnú hodnotu. FF vyššiu
document.body.scrollWidth
document.body.offsetWidth
document.documentElement.clientWidth – Firefox zobrazí skutočnú hodnotu. Opera vyššiu a IE zobrazí nulu
document.documentElement.scrollWidth
document.documentElement.offsetWidth
Z uvedeného vidno, že sa máme nad čím rozhodovať. Sofistikované riešenia môžu v javascripte vetviť pre FF zistenie pomocou document.documentElement.clientWidth a pre IE s Operou zasa document.body.clientWidth
Zaujímavá situácia však nastáva keď deklarujeme verziu dokumentu. Hodnoty sa totiž zmenia podľa toho, či deklarujeme dokument ako napríklad XHTML 1.0 Strict alebo nie.
Pripravil som pre Vás preto dva príklady:
* veľkosť okna vášho prehliadača bez deklarovanej verzie dokumentu,
* veľkosť okna vášho prehliadača s deklarovaným XHTML 1.0 Strict.
Sledujte aké čísla to zobrazuje a pri zmene okna prehliadača si stránku refreshnite. Pokúste sa porovnať aj rôzne prehliadače.
Pre tých, čo sa nevedia pozrieť do zdrojáku, tak časť z ukážok:
<p>Sirka pre FF <span id="sirka1"></span></p><script type="text/javascript">sirka1 = document.documentElement.clientWidth</script><p>Sirka pre IE a Operu <span id="sirka2"></span></p><script type="text/javascript">sirka2 = document.body.clientWidth</script>
Táto drobnosť by nás však nemusela zbytočne rozladiť, proste používame XHTML a nemáme možnosť váhať nad tým, aké rozdiely má.
Prečo by nám však nemali vadiť drobné rozdiely v číselných hodnotách?
Predstavme si, že náš layout sa v pohode bez úprav zobrazuje v pásme od 640px do 1280 px. Pre tento účel je nepodstatné či sa nám vráti číslo 864 alebo 848. Pokiaľ sa vráti 630, tak už môžeme prepínať na upravený stylesheet tým, čo to javascript povolí a to isté pre väčšie obrazovky.
Opäť zdôrazňujem, že použite maxwidth a minwidth vo vašom layoute aj pre prijateľné pásmo najmä z dôvodu dosiahnutia optimálnej šírky riadka textu. Pásmo slúži skôr na naozaj kritickú hranicu, kedy sa layout úplne rozpadne.
Bohužiaľ nemám toľko času a chuti, Mal som toľko chuti (budúci príspevok), aby som pre Vás urobil javascriptovú knižnicu, ktorú si iba pichnete do dokumentu, pripravíte alternatívne CSS layouty a už Vám to pofrčí. Spolieham sa skôr na Vás, pretože kódovanie fluidných layoutov je naozajstná výzva pre grafika aj kódera, z ktorej má profit návštevník. Miesto toho si pozrite príklad zmeny layoutu v závislosti na šírke viewportu a možno sa niekedy dočkám podobného prekvapenia ako pred časom. Aby toho nebolo dosť tak ešte pár vecí do kontextu k viewportu a fluidnému layoutu.
Čerpal som:
* evolt.org: document.body, doctype switching, and more
* rozdiel v deklarovaní dokumentu na príkladoch NODOC a XHTML
* quirksmode.org: Viewport
* zúfate nad fluidným layoutom? Tu je jeden hotový ale musíte na ňom popracovať ;-)
Tak ešte raz :-) Fakt nejde povedať: ľudia si kupujú 1024×768 monitory a tak budem robiť stránku pre 1024×768. Nie. Vážne to nejde :-)