Endre visning av side horisontal/vertikal mobilvisning

[iChristian]

Jeg lager en mobilside hvor jeg har et bilde på siden som jeg vil ha under teksten når skjermen er vanlig (langsiden vertikalt), men jeg vil flytte det til høyre for teksten når man snur skjermen (langsiden horisontal), hvordan kan jeg gjøre det?

 

Siden er i PHP og CSS for å opplyse om det.

[agm]

Her må du nok ty til responsive webdesign. Støtten varierer fortsatt en del på de mobile enhetene, så du må nesten bare leke deg frem til en løsning som fungerer for deg. Men kan jo hjelpe deg litt på vei:

 

Først må du definere enhetens viewport i HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

 

Deretter må du angi CSS. Dette eksempelet bør i prinsippet fungere, men har foreløpig dårlig støtte på forskjellige mobiler:

/* Loddrett */
@media screen and (orientation:portrait) {
body { color:red; }
}
/* Vannrett */
@media screen and (orientation:landscape) {
body { color:green; }
}

 

Istedet kan vi sjekke mobilens bredde. Vinduet vil være bredere når du holder telefonen vannrett enn loddrett. Dette vil selvsagt variere fra enhet til enhet, men de fleste ligger ca rundt oppløsningen til iPhone. Her tar vi utgangspunkt i oppløsningen på iPhone:

/* Loddrett - Opp til 320px bredde */
@media screen and (max-width: 320px) {
body { color:red; }
}
/* Vannrett - Fra 321px og opp til 480px bredde */
@media screen and (min-width: 321px) and (max-width: 480px) {
body { color:green; }
}

 

Du får som sagt prøve deg frem. Håper dette kan hjelpe deg på vei til en løsning som funker! Lykke til!

Endret 10. mars 2012 av agm

[iChristian]

Tusen takk, det løste alt