[elektro-etc] weblap mobilon

[Móczik Gábor]

2012.01.08. 16:34 keltezéssel, gyapo írta:
>> Ha normál böngészőn nézed, akkor a style.css-t tölti be, ha mobil
>> eszközön (handheld) akkor pedig a mobile.css-t
>
> Aha, akkor kétszer kell eljátszanom a variálok valamit - megnézem
> ciklust. És a css-ben mégiscsak meg kell adnom méreteket, ha nem akarom
> scrolloztatni a usert.
> Ezt megcsinálhatom wysiwyg is, előállítom a weblapot két változatban, a
> mobiloshoz megadom a stage szélességét, úgy pakolom bele az elemeket, és
> azt mutatom neki, ha mobillal jön.

Szerintem nem.

Pont az lenne a lényeg, hogy ne kelljen abszolút méreteket megadni, nem 
tudod ugyanis hogy az én mobilom milyen széles, pláne nem, hogy 
horizontálisan vagy vertikálisan böngészek-e...

Legyen minden szépen sorban, aztán majd tördelődik.

Ha ez probléma, mert az oldal struktúrája megkívánja hogy egy bizonyos 
foknál jobban ne tördelődjön (pl. hosszú táblázat sor, menü, akármi), 
vagy egy kép 600px széles és nem tud keskenyebb lenni, akkor meg 
maradjon scrollozós. Be lehet állítani a min-width méretet, ha szükséges 
(nem csak pixelben...)

Nem az a baj ha scrollozni kell, hanem az ha szükségtelenül, mert az 
oldalkeret fixen 1024px széles, de az információ a közepén kiférne két 
sorba is.

Ha komplex a weboldal, akkor ez nem biztos hogy jó, mobil esetén valamit 
ki kell hagyni, vagy másképpp, máshol megjeleníteni, ehhez már ilyenre 
tervezni kell.
CSS-ben lehet állítani hogy megjelenjen-e egyáltalán valami. Lehet a fő 
weboldal kódot olyanra írni, hogy benne van pl. az oldalmenü mobilra és 
nagy képernyőre optimalizált verziója is, mobilos CSS-ben az egyik nem 
jelenik meg, nagy képernyőn a másik.

Ezt célszerű nem úgy felépíteni, hogy 1db CSS mobilra, 1db PC-re, hanem 
úgy, hogy 1db általános, amiben minden nem-specifikus benne van és 
betöltődik mindig. Emellé 1-1db specifikus, amiben az módosul ami az 
adott esetben éppen szükséges. Ezzel elkerülhető hogy ha pl, egy szín 
változik, akkor 6 helyen kelljen átírni és szinkronban tartani.

Lehet a visiblity-t JS-ből kapcsolgatni, ezzel egy bonyolultabb oldal 
részleteit elrejteni, összecsukni, gombnyomás kinyitni. Pl. a Wikipedia 
elég jó példa erre, nézd meg mobilon.

További célszerű dolog, nem 1db monumentális CSS-t írni, ami mindig 
megjelenik, hanem minden oldalra azt ami kell. Ha a bemutatkozás oldalon 
nincs INPUT meg TEXTAREA, akkor annak a formázása sem kell oda. Legyen 
egy általános CSS, amiben az oldal stílusát meghatározó színek, 
betűtípusok, miegyebek vannak, legyen mondjuk egy form-specifikus,
stb. speciálisabb aloldalakra meg legyen speciális CSS, ennek 
mobilos/PC-s verziója, ...

Sokkal-sokkal könnyebb így karbantartani, mint egy 70kB méretű fájlt 
csesztetni, és hibatűrőbb is. Ha pl. vétesz egy hibát ami kikerül az 
éles tárhelyre, akkor legfeljebb szétesik egy aloldal, de nem az egész site.