Weboldal mobilra

Kategóriák : CSS3, HTML5, Webdesign

Hogyan alakíthatunk át egy honlapot mobil eszközökre?

Az átalakítandó honlap méretezhetővé tételéhez a weboldal forráskódjában DIV címkéket érdemes használni a weblap elrendezéséhez. Módjával használjunk TABLE elemeket. A DIV tagok meghatározhatják a weblap layout-ját, vagyis elrendezését. A DIV-ek helyettesíthetők szemantikus elemekkel is, például header vagy nav, stb..

Általában egy weboldal elrendezése úgy néz ki, hogy van az oldalnak egy fejrésze, a weblap törzse egy, kettő vagy három hasábból áll és a lap alján pedig van a footer vagy lábléc.

• A weboldalt teljesen átméretezhetővé kell tennünk, amelyet úgy oldunk meg, hogy fix, állandó szélességeket soha nem adunk meg. A szélességeket vagy a width attribútummal ellátott elemeket a CSS-ben igazítható, százalékos méretekként deklaráljuk.
• Ez azt jelenti, hogy megadjuk egy width: 100%; méretet és egy felső határt állítunk be a max-width: 980px; deklarációval. Ez utóbbi azt jelenti a weboldal törzsével kapcsolatban, hogy asztali számítógépek böngészőjén a weboldal szélessége nem vehet fel 980 pixelnél nagyobb értéket, 980 a szélesség maximális mérete pixelben. Kisebb méretet azonban felvehet, ahogy az eszköz magától méretezi a weblapot.
• Egy másik beállítást is érdemes használni az átméretezhetőséget illetően. Például a menüsávnak, menüpontoknak van egy minimális magassága. Ennél a magasságnál nem lehet kisebb a menüsáv mérete. Méretezése pedig úgy történhet, hogy min-height: 32px; és height: 100%; Amely azt jelenti, hogy a menüsáv mérete nem lehet 32 pixelnél kisebb..


Tesztelés
Próbaképpen nézzük meg honlapom átméretezési technikáját. Most kattintsunk a böngésző ablakában, a jobb felső sarokban a második ablakvezérlő ikonra és az ablak jobb alsó sarkára vigyük az egérkurzort, majd fogd és vidd technikával méretezzük át a böngésző ablakát. Látható, ahogy állítjuk az ablak méretét, a szöveg és az oldal elrendezése mindig igazodik a rendelkezésre álló mérethez.

Eszközök automatikusan méretezik a szélességet
Ehhez a funkcióhoz weblapunk fejrészébe be kell illeszteni a következő meta tagot az alábbi attribútumokkal.
name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"
Így ha egy mobil telefon megkapja a honlapot, akkor az figyelembe veszi a device-width, azaz az eszköz szélességét.

A Google mobil eszközökre is teszteli az oldalt ezen a linken.
Google PageSpeed