Hogyan lehet egy oldalnak mobil felületet létrehozni?

Meg van a full CSS, majd annak végére be rakod a mobil méreteket.

/* Mobile 800->480 */

@media only screen and (max-width:800px){

html, body { font-size: 16px; }

div.MainClass { max-width: 800px; }

/* .... */

}

/* Mobile 480->320 */

@media only screen and (max-width:480px){

html, body { font-size: 14px; }

div.MainClass { max-width: 480px; }

/* .... */

}

/* Mobile 320->240 */

@media only screen and (max-width:320px){

html, body { font-size: 12px; }

div.MainClass { max-width: 320px; }

/* .... */

}

Két módon.

1. a weboldal inicializációs részébe beépítenek egy kis megfigyelő scriptet, ami ha érzékeli, hogy mobil eszközről nyitották meg, akkor átirányít egy mobil oldalra (egy olyan aldomainre, ami kifejezetten a mobil megjelenést támogatja). pl: www.teoldalad.hu-ról átküld a m.teoldalad.hu-ra.

Ezt a megoldást akkor szokták használni, ha gyorsan kell megoldani a mobil megjelenítést, vagy nincs pénz a teljes weboldal reszponzív megjelenítését megcsinálni. Hátránya, hogy két külön weboldalt kell fenntartani és karbantartani.

2. a weboldalt reszponzív megjelenítési rendszerrel látják el. Ez több lépcsőből és folyamatból áll, a weboldal szerkezetét, és megjelenítési rendszerét (html, css, js) úgy kell felépíteni, hogy bármilyen képernyőmérethez, felbontáshoz, és megjelenítőhöz illeszkedjen. Ez nem azt jelenti, hogy minden méretű képernyőn ugyanúgy néz ki, hanem azt, hogy egy kisebb megjelenítőn (pl mobiltelefon) a weboldal szerkezete átstruktúrálódhasson, hogy a kényelmes böngészés élménye ne vesszen el.

Ez egy drágább, de hosszú távon mégis olcsóbb megoldás. Kevesebb karbantartást igényel, sokféle megjelenítési módot meg lehet vele valósítani úgy, hogy csupán egy weboldalt kell karbantartani.

Azt javaslom a létező weboldalhoz egy szakember véleményét/segítségét kérd ki. Gyakran egy új weboldal design (ami eleve reszponzív) költségkímélőbb, mint a meglévőt átalakítani.