iPad Browser WIDTH & HEIGHT Standard

Question

Kennt jemand die sicherste Breite und Höhe für den BODY beim Betrachten einer Webseite auf dem iPad? Ich möchte die Bildlaufleisten so gut wie möglich meiden.

Danke.

Erik

Answer 1

Die Pixelbreite und -höhe Ihrer Seite hängt sowohl von der Ausrichtung als auch vom Meta-Viewport-Tag ab, sofern angegeben. Hier sind die Ergebnisse der Ausführung von jquery $ (window) .width() und $ (window) .height() in iPad 1 Browser.

Wenn Seite hat keine Meta-Darstellungs tag:

• Porträt: 980x1208
• Landschaft: 980x661

Wenn Seite eines dieser beiden Meta-Tags hat:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

• Porträt: 768x946
• Landschaft: 1024x690

Mit <meta name="viewport" content="width=device-width">:

• Porträt: 768x946
• Landschaft: 768x518

Mit <meta name="viewport" content="height=device-height">:

• Porträt: 980x1024
• Landschaft: 980x1024

Mit <meta name="viewport" content="height=device-height,width=device-width">:

• Porträt: 768x1024
• Landschaft: 768x1024

Mit <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• Porträt: 768x1024
• Landschaft: 1024x1024

Mit <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• Porträt: 831x1024
• Landschaft: 1520x1024

Answer 2

Es gibt keine einfache Antwort auf diese Frage. Apples mobile Version von WebKit, die in iPhones, iPod Touches und iPads verwendet wird, skaliert die Seite so, dass sie auf den Bildschirm passt. An diesem Punkt kann der Benutzer frei ein- und auszoomen.

Das heißt, Sie können Ihre Seite so gestalten, dass der Zoomaufwand minimiert wird. Die beste Lösung besteht darin, die Breite und Höhe der unteren Auflösung des iPad anzupassen, da Sie nicht wissen, in welcher Richtung es ausgerichtet ist. Mit anderen Worten, Sie würden Ihre Seite 768x768 erstellen, damit sie gut auf dem iPad-Bildschirm passt, ob sie auf 1024x768 oder 768x1024 ausgerichtet ist.

Noch wichtiger, Sie möchten Ihre Seite mit großen Steuerelementen mit viel Platz gestalten, die mit Ihren Daumen leicht zu treffen sind - Sie könnten leicht eine 768x768 Seite entwerfen, die sehr unübersichtlich war und daher viel Zoomen erforderte. Um dies zu erreichen, möchten Sie Ihre Steuerelemente wahrscheinlich auf mehrere Webseiten verteilen.

Auf der anderen Seite ist es nicht die lohnendste Verfolgung. Wenn Sie beim Entwerfen Möglichkeiten finden, Ihre Seite "fingerfreundlicher" zu machen, dann gehen Sie darauf ... aber die Realität ist, dass iPad-Benutzer sich sehr wohl damit fühlen, herumzu- und herauszuzoomen, um an Dinge zu kommen Es ist auf den meisten Websites erforderlich. Wenn überhaupt, möchten Sie es wahrscheinlich so gestalten, dass es für diese Art der Navigation förderlich ist.

Machen Sie Boxen mit relevanten gruppierten Daten, die einfach doppelt angetippt werden können, um sich darauf zu konzentrieren, und verwandte Steuerungen nahe beieinander zu halten. iPad-Nutzer werden wahrscheinlich eine Seite schätzen, die die vertraute Zoom-und-Schwenk-Navigation erleichtert, die sie gewohnt sind, mehr als eine Seite mit weniger Steuerelementen, so dass sie dies nicht tun müssen.

Answer 3

Sie können dies versuchen:

/*iPad landscape oriented styles */ 

    @media only screen and (device-width:768px)and (orientation:landscape){ 
     .yourstyle{ 

     } 

    } 

    /*iPad Portrait oriented styles */ 

    @media only screen and (device-width:768px)and (orientation:portrait){ 
     .yourstyle{ 

     } 
    }