Gå til innhold

iPhone nettlesere kutter bakgrunn


Anbefalte innlegg

Videoannonse
Annonse

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?

Lenke til kommentar
  • 3 uker senere...

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 av Milktea
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...