Liste der bekannten Unterschiede zwischen "Safari auf dem iPad" und "Safari auf dem iPhone"

Question

Meine Website sieht perfekt auf dem iPhone, aber sieht auf dem iPad suboptimal aus. Ich habe große Schwierigkeiten, Informationen über die Unterschiede zwischen der Webkit/Safari-Rendering-Engine von iPad und der Webkit/Safari-Rendering-Engine von iPhones zu finden.

Wenn Sie mir nicht glauben, gehen Sie auf dem iPhone und dem iPad zu http://www.finishline.com (beachten Sie, dass Sie auf "Standard-Website" am Ende der Seite klicken müssen, wenn Sie auf unsere mobile Website geworfen werden) . Die Hauptunterschiede sind ein fehlender weißer Hintergrund und das Hauptnavigationsmenü an der Spitze (auch der kleine Minikart oben rechts ist weit weg).

iPhone (sieht richtig):

iPad (falsch aussieht):

Was sind die Rendering-Unterschiede zwischen mobilen Webkit auf dem iPhone und iPad?

Answer 1

iPhone und iPad verwenden dieselbe Rendering-Engine, WebKit.

Die einzigen offensichtlichen Unterschiede zwischen diesen Plattformen können sein:

• Wenn Schriftgrößen auf der Seite in Pixeln angegeben werden, der höhere DPI gräflichen Retina-Display eines gewisse Wirkung auf Skalierung von Text haben könnte, aber ich könnte falsch sein . Geben Sie immer die Schriftgrößen in Punkten an.
• Bildschirmgrößen beider Geräte sind unterschiedlich. Nicht in Bezug auf Pixel, sondern in Bezug auf die physische Größe. Dies versucht WebKit (oder iOS im Allgemeinen) zu kompensieren, indem die Größe von Schriftarten geändert wird, um sie lesbar zu machen, während sie noch auf die Seite passen. Dies könnte dazu führen, dass das Dokument erneut fließt. Zeilenumbrüche verursachen.

Für diesen Fall kann ich wirklich nichts anderes vorschlagen als das Seitenlayout zu überprüfen. Validieren Sie es mit den W3C-Tools und testen Sie es sowohl im Simulator als auch auf den Geräten.

Von dem, was oben aussieht, können einige CSS-Hacks (um es zum Beispiel auf IE zu arbeiten) einen solchen Effekt haben. Oder eine Stray-Line-Pause.

Im Allgemeinen sollten Sie sich nicht um Unterschiede zwischen diesen beiden Plattformen oder Plattformen im Allgemeinen sorgen. Verwenden Sie sauberes CSS und HTML und testen Sie es auf allen Zielgeräten, bis es ordnungsgemäß aussieht. Versuchen Sie, CSS/HTML-Hacks zu vermeiden, damit IE6 funktioniert. Dies ist eine der Ursachen für Probleme aus meiner Erfahrung.

Soweit ich weiß, gibt es keine "großen" Unterschiede zwischen diesen Geräten, abgesehen von ihrer Bildschirmgröße (und möglicherweise der verwendeten WebKit/iOS-Version - sagen wir iOS 3.x vs. iOS 4.2).

Wenn Sie Zugriff auf Xcode haben, versuchen Sie, die Site von verschiedenen iOS-Versionen aus zu sehen, um zu sehen, ob das das Problem ist.

In jedem Fall. Korrigieren Sie Ihr HTML und CSS. Das Problem könnte eine sehr einfache Ursache haben.

Answer 2

Ihr iPad wird wahrscheinlich iOS 3.2 (oder eine Betaversion von 4.2) ausführen, während Ihr iPhone mindestens iOS 4.0 ausführt. Das ist wichtiger als die Unterschiede zwischen den Plattformen (von denen es keine geben sollte).

Ich glaube, Sie bellen den falschen Baum und bitten um eine Liste der Unterschiede - Sie können http://trac.webkit.org/ gehen und eine erschöpfende Liste von Patches und Bugfixes zwischen den beiden Versionen erhalten, aber es wird schneller sein, nur zu verwenden normale CSS-Fehlerbehebungs-Techniken (dh meistens Trial-and-Error), um herauszufinden, was Ihre Seite verursacht, dass es in iOS 3.2 versaut wird.