Čo je Viewport?
Zobrazovacie okno je viditeľná oblasť webovej stránky. Líši sa podľa zariadenia a môže sa zväčšovať alebo zmenšovať v závislosti od rozlíšenia obrazovky zariadenia.
Zobrazenie na rôznych zariadeniach
Veľkosť zobrazovacieho priestoru sa mení v závislosti od zariadenia, ktoré sa používa na zobrazenie webovej stránky. Napríklad na monitore stolného počítača môže byť zobrazovacie okno veľmi široké a zobrazovať veľké množstvo obsahu vo vodorovnej rovine. Na mobilnom zariadení je zobrazovacia plocha oveľa užšia, zobrazuje menej obsahu horizontálne, ale často vyžaduje vertikálne posúvanie, aby sa zobrazilo viac.
Príklady variácií zobrazenia
Na nasledujúcom obrázku je zobrazené zobrazenie tej istej webovej stránky na rôznych zariadeniach. Všimnite si, ako sa pri zväčšení dĺžky zobrazovacej plochy zobrazí viac obsahu. Formát webovej stránky sa tiež mení v závislosti od šírky viewportu. Čím širší je viewport, tým viac obsahu sa zobrazí na celej stránke.
Zmeny zobrazovacieho priestoru so zmenou veľkosti prehliadača
Bez ohľadu na rozlíšenie zobrazovacieho zariadenia sa zobrazovacie okno zmení, keď používateľ zmení veľkosť okna prehliadača. Napríklad pri zmenšení veľkosti prehliadača sa zobrazovacie pole zmenší, čím sa zobrazí menej obsahu.
Význam Viewport v responzívnom dizajne
Zobrazovacie okno je kľúčovou súčasťou responzívneho dizajnu, ktorého cieľom je zobrazovať rovnaké webové stránky všetkým používateľom bez ohľadu na ich zariadenie. Responzívny dizajn zabezpečuje, aby sa webové stránky prispôsobili rôznym veľkostiam a rozlíšeniam obrazovky a poskytovali optimálny zážitok zo zobrazenia na všetkých zariadeniach.
Zadanie zobrazovacieho priestoru
Zobrazenie môžete určiť pomocou metaznačky viewport v jazyku HTML. Tento tag pomáha kontrolovať rozloženie webovej stránky na rôznych zariadeniach. Tu je príklad:
<meta name="viewport" content="width=device-width, initial-scale=1" />Táto značka nastaví šírku zobrazovacieho priestoru tak, aby zodpovedala šírke zariadenia, a nastaví počiatočnú mierku na 1, čím zabezpečí, že sa obsah správne zmestí na obrazovku.
Záver
Pochopenie zobrazovacieho priestoru je nevyhnutné na vytváranie responzívnych webových návrhov, ktoré poskytujú konzistentné a používateľsky prívetivé prostredie na všetkých zariadeniach. Pomocou metaznačky viewport môžu vývojári kontrolovať, ako sa webové stránky zobrazujú na rôznych obrazovkách, čím sa zabezpečí prístupnosť a použiteľnosť pre všetkých používateľov.
