Reszponzív webdesign nézetablak
Tartalomjegyzék
Mi az a Nézőablaka?
A nézetablak egy weboldal felhasználó által látható területe.
A nézet az eszköztől függően változik, és mobiltelefonon kisebb lesz, mint számítógép képernyőjén.
A táblagépek és mobiltelefonok előtt a weboldalakat csak a számítógép képernyőjére tervezték, és ez általános volt hogy a weboldalak statikus kialakításúak és fix méretűek legyenek.
Aztán amikor elkezdtünk szörfözni az interneten táblagépen és mobiltelefonon, megoldódott méretű weboldalak túl nagyok voltak ahhoz, hogy elférjenek a nézetben. Ennek kijavításához az eszközök böngészői a teljes weboldalt kicsinyítették, hogy elférjen a képernyőn.
Ez nem volt tökéletes!! De gyors megoldás.
A nézetablak beállítása
A HTML5 bevezetett egy módszert, amellyel a webes tervezők átvehetik az irányítást a nézetablak felett, a címkét.
A következő nézetablak elemet kell szerepeltetnie minden weboldalán:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ez utasításokat ad a böngészőnek, hogyan az oldal méreteinek és méretezésének szabályozásához.
A width=device-width rész úgy állítja be az oldal szélességét, hogy kövesse az eszköz képernyőjének szélességét (ez eszköztől függően változhat).
Az initial-scale=1.0 rész beállítja a kezdeti nagyítási szintet, amikor az oldalt először betölti a böngésző.
Íme egy példa egy weblapra, nélkül a nézetablak metacímke, és ugyanarra a weboldalra a a nézetablak metacímkével:
Tipp: Ha telefonnal vagy táblagéppel böngészi ezt az oldalt, kattintson a fenti két linkre a különbség megtekintéséhez.
A tartalom mérete a nézetablakhoz
A felhasználók a webhelyeket függőlegesen görgetik asztali számítógépen és mobileszközön egyaránt eszközöket - de nem vízszintesen!
Tehát, ha a felhasználó kénytelen vízszintesen görgetni vagy kicsinyíteni, hogy lássa a az egész weboldal rossz felhasználói élményt eredményez.
Néhány további betartandó szabály:
1. NE használjon nagy fix szélességű elemeket - például ha a kép nagyobb szélességben jelenik meg, mint az általa okozott nézet nézetablakot a vízszintes görgetéshez. Ne felejtse el beállítani ezt a tartalmat, hogy beleférjen a nézetablak szélessége.
2. NE hagyja, hogy a tartalom egy adott nézetablak szélességétől függjön jól renderel - Mivel a képernyő méretei és szélessége CSS-képpontokban változó széles körben az eszközök között, a tartalom nem függhet egy adott nézetablak szélességétől jól megjeleníteni.
3. Használjon CSS médialekérdezéseket, hogy eltérő stílust alkalmazzon a kis és nagy képernyők - Nagy abszolút CSS-szélesség beállítása oldalelemekhez akkor az elem túl széles lesz a nézetablakhoz egy kisebb eszközön. Ehelyett fontolja meg a relatív szélességértékek használatát, például szélesség: 100%. Továbbá légy ügyeljen a nagy abszolút pozicionálási értékek használatára. Ez okozhatja az elemet kis eszközökön kívül esnek a nézetablakon.