Safari Mobile scale/resize probleem

[IT07]

Beste mensen,

Op dit moment ben ik aan een website bezig die een 1120x400 header heeft aan de top van de pagina.
(ik kan jullie helaas geen voorbeeld laten zien mede doordat het een afgeschermd project is)
Die header, (en eigenlijk de hele pagina) word niet goed gescaled waardoor er blanke velden aan de rechterzijde van de pagina te zien zijn.

Ik heb bijvoorbeeld deze meta tag geprobeerd maar helpt geen drol:

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

Het frappante eraan is dat er andere websites zijn met ook zo'n 100% width headertje en die werken perfect op m'n iphone! :evil:

Er valt me echter 1 ding op:
bij de juist werkende websites is het niet mogelijk om de pagina horizontaal te "bewegen".
en dat is nu juist precies wat wel mogelijk is op de desbetreffende website....

Wat voor stukje code heb ik niet wat de werkende websites wel hebben?

 

[csshunter]

Hoi IT07,
Een viewport van 1024px geldt alleen voor de landscape-houding, in portret-oriëntatie gebruikt Safari Mobile een breedte van 980px
(zie bron: Choosing a viewport for iPad sites).

Heb je deze al geprobeerd?

<meta name="viewport" content="width=720, maximum-scale=1.0" />

Los hiervan: op mijn 1024*768px desktop-scherm zal ik bij een 1120x400px header ook altijd een horizontale scrollbar krijgen.

• Veiligheidshalve ga ik niet breder dan 990px all-in voor de paginabreedte, dan kan de verticale scrollbar rechts er ook nog bij op 1024*768. Met pagina centreren hebben hogere resoluties ook een mooi beeld.
• Eventueel kan je het header-img in de html zetten (dus niet als background-img) en alleen een {width:100%;} geven, dan past de hoogte zich automatisch aan. *)
• Afhankelijk van de layout: is de werkelijke breedte 1120px, dan kan er een {max-width: 1120px;} bij nodig zijn om het img niet op te blazen bij grote schermen.
• En mocht het perse nodig zijn, dan kan je ook nog altijd via javascript een afwijkend formaat header-img toedienen (zie bv. hier).

Met vriendelijke groet,
CSShunter
______________
*) Het img wel als background-img van een <div> plaatsen en via de <div>-breedte laten afsnijden bij kleinere breedtes kan natuurlijk ook, als het img zich ervoor leent.

 

[IT07]

Hey CSShunter,

Hartelijk bedankt voor je reactie weer!
Eerlijk gezegd was het probleem opeens opgelost
toen ik overflow:hidden toepaste aan de 100% header.

Maar ik was eigenlijk ook wel benieuwd of ik

<meta name="viewport" content="1120px" />

kan gebruiken. Mede omdat de nieuwste iPad een hoge resolutie heeft.

Even voor de duidelijkheid:
De website pagina ziet er nu perfect uit op de iPhone,
en de horizontale scroll is ook niet meer mogelijk
Trouwens, de ware breedte van de pagina is niet 1120.
de wrapper is 1120px en de content-div staat daar 60px vanaf met margin-left.