Liste des différences connues entre "Safari sur iPad" et "Safari sur iPhone"

Question

Mon site Web ressemble parfait sur l'iPhone, mais semble sous-optimale sur l'iPad. J'ai beaucoup de mal à trouver des informations sur les différences entre le moteur de rendu webkit/safari de l'iPad et le moteur de rendu webkit/safari d'iPhones. Si vous ne me croyez pas, allez à http://www.finishline.com sur l'iPhone et l'iPad (notez que vous devrez cliquer sur "site standard" au bas de la page si vous êtes redirigé vers notre site mobile) . Les différences principales étant un fond blanc manquant et le menu principal de navigation par onglets en haut (aussi le petit mini-panier en haut à droite est loin).

iPhone (semble correct):

iPad (semble erroné):

Quelles sont les différences de rendu entre WebKit mobile sur iPhone et iPad?

Answer 1

L'iPhone et l'iPad utilisent le même moteur de rendu, WebKit.

Les seules différences évidentes entre ces plates-formes pourraient être:

• Si la taille des polices sur le site sont spécifiées en pixels, le nombre DPI supérieur de l'affichage de la rétine pourrait avoir un effet sur l'échelle de texte, mais je peux me tromper . Toujours spécifier les tailles de police en points.
• Les tailles d'écran des deux périphériques sont différentes. Pas en termes de pixels, mais en termes de taille physique. C'est quelque chose que WebKit (ou iOS en général) essaie de compenser en redimensionnant les polices pour les rendre lisibles tout en restant sur la page. Cela pourrait conduire à refaire le document; provoquant des sauts de ligne.

Pour ce cas, je ne peux pas vraiment suggérer autre chose que de vérifier votre mise en page. Le valider en utilisant les outils du W3C et en le testant correctement dans le simulateur et, plus important encore, sur les appareils. De ce à quoi il ressemble ci-dessus, certains hacks CSS (pour le faire fonctionner sur IE par exemple) pourraient avoir un effet comme celui-ci. Ou une rupture de ligne.

Généralement, vous ne devriez pas vous soucier des différences entre ces deux plates-formes, ou plates-formes en général. Utilisez des feuilles de style CSS et HTML propres et testez-les sur tous les appareils cibles jusqu'à ce que leur aspect soit correct. Essayez d'éviter d'utiliser les hacks CSS/HTML pour faire fonctionner IE6. C'est l'une des causes profondes des problèmes de mon expérience. Autant que je sache, il n'y a pas de différences "majeures" entre ces appareils, à l'exception de leur taille d'écran (et éventuellement de la version WebKit/iOS utilisée - disons iOS 3.x vs iOS 4.2).

Si vous avez accès à Xcode, essayez de regarder le site à partir de différentes versions d'iOS pour voir si c'est le problème.

Dans les deux cas. Corrigez votre code HTML et CSS. Le problème peut avoir une cause très simple.

Answer 2

Votre iPad fonctionne probablement sous iOS 3.2 (ou un bêta de 4,2) alors que votre iPhone fonctionne au moins sur iOS 4.0. C'est plus important que les différences entre les plates-formes (dont il n'y en a pas supposément).

Je pense que vous aboyer le mauvais arbre en demandant une liste de différences - vous pouvez aller à http://trac.webkit.org/ et obtenir une liste exhaustive des correctifs et des corrections de bugs entre les deux versions, mais il va être plus rapide à utiliser techniques de dépannage CSS normales (c'est-à-dire la plupart du temps des essais et des erreurs) pour comprendre ce que votre site est en train de faire gâcher dans iOS 3.2.