Hlavným problémom súvisiacim so zmenou zobrazovanej oblasti HTML na veľkosť smartfónu je to, že môže spôsobiť, že webová lokalita prestane reagovať alebo sa zobrazí nesprávne. Je to preto, že keď sa zmení zobrazovaná oblasť, webová lokalita nemusí byť optimalizovaná pre menšiu veľkosť obrazovky a nemusí byť schopná správne zmenšiť jej obsah. Okrem toho niektoré funkcie nemusia fungovať správne na menšej veľkosti obrazovky, napríklad navigačné ponuky alebo interaktívne prvky.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Tento riadok kódu je metaznačka, ktorá poskytuje prehliadaču informácie o dokumente HTML.
2. Atribút name je nastavený na „viewport“, čo prehliadaču hovorí, že tento tag obsahuje informácie o tom, ako sa má stránka zobraziť na rôznych zariadeniach.
3. Atribút content je nastavený na „width=device-width, initial-scale=1.0“, čo prehliadaču hovorí, že by mal použiť šírku zariadenia ako šírku stránky a v prípade potreby ju zmenšiť alebo zväčšiť.
Citlivý webdizajn
Responzívny webový dizajn je prístup k webovému dizajnu, vďaka ktorému sa webové stránky dobre vykresľujú na rôznych zariadeniach a veľkostiach okien alebo obrazoviek. Využíva kombináciu flexibilných mriežok a rozložení, obrázkov a inteligentného využívania mediálnych dopytov CSS. Responzívne webové stránky sú navrhnuté tak, aby poskytovali optimálny zážitok zo sledovania – jednoduché čítanie a navigáciu s minimom zmeny veľkosti, posúvania a posúvania – na širokej škále zariadení (od monitorov stolných počítačov až po mobilné telefóny).
V HTML možno responzívny dizajn dosiahnuť pomocou nasledujúcich techník:
• Flexibilné mriežky – Použitie relatívnych jednotiek, ako sú percentá alebo ems namiesto jednotiek s pevnou šírkou, ako sú pixely, pre prvky rozloženia umožňuje, aby sa stránka flexibilne prispôsobila rôznym veľkostiam obrazovky.
• Media queries – CSS3 media queries umožňujú vývojárom špecifikovať rôzne štýly pre rôzne šírky zariadenia. To umožňuje prispôsobenie rozloženia stránky v závislosti od používaného zariadenia.
• Responzívne obrázky – Obrázky môžu byť responzívne pomocou atribútu srcset v HTML5, ktorý umožňuje vývojárom špecifikovať viacero verzií obrázka v rôznych rozlíšeniach pre rôzne zariadenia.
• Flexibilné videá – Videá môžu byť tiež responzívne pomocou vlastnosti object-fit v CSS, ktorá umožňuje vývojárom určiť, ako sa majú videá škálovať v rámci ich kontajnerov v závislosti od ich veľkosti.
Metaznačka zobrazovanej oblasti
Metaznačka zobrazovanej oblasti je prvok HTML, ktorý prehliadaču hovorí, ako upraviť rozmery a mierku stránky tak, aby vyhovovala používanému zariadeniu. Používa sa na ovládanie vzhľadu webovej stránky na rôznych zariadeniach, ako sú smartfóny a tablety. Metaznačku viewport je možné použiť na nastavenie šírky webovej stránky, jej mierku nahor alebo nadol a na určenie, či používatelia môžu alebo nemôžu približovať alebo odďaľovať. Môže sa tiež použiť na nastavenie počiatočnej mierky, maximálnej mierky, užívateľsky škálovateľných vlastností a ďalších.
Ako prispôsobím svoje webové stránky obrazovke telefónu
Ak chcete, aby sa webová lokalita prispôsobila obrazovke telefónu v jazyku HTML, môžete použiť metaznačku zobrazovanej oblasti. Táto značka vám umožňuje ovládať, ako sa váš web zobrazuje na rôznych zariadeniach. Šírku zobrazovanej oblasti môžete nastaviť tak, aby sa rovnala šírke zariadenia, takže vaša webová lokalita automaticky prispôsobí svoju veľkosť tak, aby sa prispôsobila obrazovke akéhokoľvek zariadenia. Okrem toho môžete v kóde CSS použiť aj mediálne dopyty na ďalšie prispôsobenie vzhľadu vašej webovej lokality na rôznych zariadeniach.
