2010-06-22 11 views
2

J'ai a website qui a l'air bien vu dans Safari sur un iPhone. Dans iOS3.x, vous pouvez l'enregistrer sous forme d'icône sur l'écran d'accueil et il s'ouvre très bien.Site la mauvaise largeur sur iPhone sur iOS4 lors de l'enregistrement sur l'écran d'accueil

Mais iOS4, alors qu'il semble toujours la bonne largeur dans Safari, si vous l'ouvrez directement à partir d'une icône de l'écran d'accueil, alors il est trop large.

J'ai passé quelques heures à jouer avec différents paramètres de la balise META viewport, et des réglages CSS, mais pas de joie. Quelqu'un peut-il voir ce qui ne va pas, ou pourquoi ce serait différent dans iOS4 vs iOS3?

+0

Voici une capture d'écran de la façon dont il est censé regarder: http://www.gyford.com/temp/guardian1.png Et l'un de comment il ressemble quand il est ouvert depuis l'écran d'accueil avec iOS4: http: // www .gyford.com/temp/guardian2.png –

+0

Au cas où quelqu'un trouverait cela à nouveau, j'ai rédigé ma solution finale ici: http://www.gyford.com/phil/writing/2010/07/06/web -page-iphone.php Fondamentalement, utilisez max-width, plutôt que la largeur. –

Répondre

0

EDIT: Je l'ai testé, et quelque chose est définitivement faux. Je ne peux pas vous aider ici, mais cela a probablement quelque chose à voir avec votre CSS.


réponse originale:

C'est parce que l'iPhone enregistre automatiquement le niveau de zoom actuel du site Web lorsque vous créez un clip web à votre domicile à l'écran. Assurez-vous de faire un zoom avant de créer le web-clip si vous ne voulez pas que cela se produise.

+0

Merci d'avoir regardé Emil. Étrange que cela semble fonctionner correctement dans iOS3, et qu'il semble différent dans les deux situations. Je me demande ce qui est différent à propos du moteur de rendu. –

+0

Il semble presque que le site se réinitialise à cette positin. Si vous faites défiler un peu, il reviendra en haut dans quelques secondes. Vous n'avez pas défini le META-tag REFRESH, n'est-ce pas? – Emil

+0

Non. Je ne suis pas sûr de ce que vous entendez par "pop back to the top". Je pense que c'est peut-être la toute première fois que vous ouvrez l'icône à partir de l'écran d'accueil. Au départ, il contient une sorte de version "prévisualisation" de Safari, mais pas de barre d'adresse Safari en haut de la page. Quand il charge la page pour de vrai, alors il la positionne en haut de l'écran. Je ne pense pas que cela soit lié à ce problème. –

0

J'ai regardé votre CSS et vous définissez la largeur d'un ensemble px. Essayez d'utiliser "width: 100%" dans vos divs (wrapper, window, main, etc ...) au lieu d'un ensemble px. Bien sûr, cela signifie que vous devrez "reconnaître" l'appareil et envoyer un css différent si c'est autre chose qu'un webview sur l'iphone.

Pour l'instant juste tester 100%, si cela fonctionne, alors vous pouvez commencer à regarder la redirection selon l'appareil css qui consulte la page.

Espérons que cela a du sens, sinon laissez-moi savoir.

+0

Merci, mais cela semble faire à peu près la même chose - le site semble OK dans Safari, mais pas lorsqu'il est ouvert à partir de l'écran d'accueil. Bizarre. Les documents Apple suggèrent qu'un site à largeur fixe convient si vous définissez la fenêtre de manière appropriée: http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html # // apple_ref/html/const/viewport "Si votre page Web est plus étroite que 980 pixels, vous devez définir la largeur de la fenêtre d'affichage en fonction de votre contenu Web.Si vous concevez une application Web spécifique à l'iPhone ... régler la largeur à la largeur de l'appareil. " –

0

FYI - cela me rend fou. Mon lien écran d'accueil a fonctionné absolument bien avec vn 3 et maintenant il est cassé.

Je suis sûr que c'est un bug ... répondra si/quand je trouve un correctif.