iPhone nettlesere kutter bakgrunn

[Torjus]

Opplever en merkelig og irriterende bug på iPhone (og muligens iPad). Kun en 1/3 av bakgrunnen blir vist. Dette gjelder både standard nettleseren safari og Opera Mini. Har ikke testet på Android o.l. Se bilde i vedlegg. Siden det gjelder er KVS Lyngdal.

 

Noen som har vært borti dette problemet?

[Torjus]

Opplever en merkelig og irriterende bug på iPhone (og muligens iPad). Kun en 1/3 av bakgrunnen blir vist. Dette gjelder både standard nettleseren safari og Opera Mini. Har ikke testet på Android o.l. Se bilde i vedlegg. Siden det gjelder er KVS Lyngdal.

 

Noen som har vært borti dette problemet?

 

Ingen andre som har opplevd dette?

[GeCcO]

Samme i android (ICS) med standard nettleser.

 

[Torjus]

Ingen som har erfaring med dette? Har prøvd å google, men uten hell.

[Milktea]

Du setter viewport til device-width. Det er i og for seg greit. På en iPad i landskapsvisning er dette 1024px, så det fungerer fint. Dersom du derimot roterer iPad-en eller bruker en mindre skjerm (f. eks. iPhone)setter du effektivt viewport til noe veldig lite. Da blir bakgrunnen din satt til device-width, mens innholdet ditt er bredere.

 

Problemet her er at siden din skalerer ikke konsistent. Toppen av siden din og bakgrunnen skalerer etter viewport, men hoveddelen av innholdet ditt har, så vidt jeg kan se, en minimumsbredde på 1024px. Da er det ikke rart stakkars Mobile Safari og andre nettlesere som baserer seg på å skalere nettsteder ikke klarer å vise siden din slik du ønsker.

 

Problemet har to løsninger. Enten kan du skrive om nettsiden din så den faktisk skalerer skikkelig, eller du kan ta den late løsningen og bare tvinge inn en minimumsbredde.

 

Lat løsning:

 

<meta name="viewport" content="width=1024">

Tror i hvertfall Mobile Safari automatisk nedskalerer siden så den passer til skjermbredden. Hvis ikke kan prøve deg frem med initial-scale, minimum-scale og liknende. Det er også mulig sette størrelser ved window.onorientationchange dersom du ønsker at siden alltid skal passe til klienten.

 

Ninja edit: Hvis du forventer mange mobile brukere til siden din er det viktig å tilrettelegge for dem. Selv om mobile nettlesere er veldig flinke til å skalere og gjør store sider veldig anvendelig er det enormt krevende. Hvis du vil at siden din skal laste raskt og være responsiv på en iPhone bør du ta den skikkelige løsningen og gjøre så siden ditt skalerer til skjermen og deretter slå av skalering hos klienten med "initial-scale=1.0, user-scalable=no". På mitt siste prosjekt fikk jeg mellom 2 og 3 ganger ytelse ut av iPad-en bare ved å gjøre dette.

Endret 6. februar 2012 av Milktea