iPad Browser WIDTH & HEIGHT Standard

125

Kennt jemand die sicherste Breite und Höhe für den KÖRPER, wenn er eine Webseite auf dem iPad anzeigt? Ich möchte die Bildlaufleisten so weit wie möglich vermeiden.

Vielen Dank.

Erik

Erik
quelle
1
Hier ist ein Link zu einem der browserbasierten Simulatoren, mit denen Sie den Querformatmodus des iPad testen können. Http://alexw.me/ipad2/#!safari
Venkat - Open IT

Antworten:

277

Die Pixelbreite und -höhe Ihrer Seite hängt von der Ausrichtung sowie dem Meta-Ansichtsfenster-Tag ab, sofern angegeben. Hier sind die Ergebnisse der Ausführung von $ (Fenster) .width () und $ (Fenster) .height () von jquery im iPad 1-Browser.

Wenn die Seite kein Meta-Ansichtsfenster-Tag hat:

  • Porträt: 980 x 1208
  • Landschaft: 980 x 661

Wenn die 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: 768 x 946
  • Landschaft: 1024 x 690

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

  • Porträt: 768 x 946
  • Landschaft: 768 x 518

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

  • Porträt: 980 x 1024
  • Landschaft: 980 x 1024

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

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

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

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

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

  • Porträt: 831 x 1024
  • Landschaft: 1520 x 1024
Paul Rademacher
quelle
Sind diese für das iPad 2 mit iOS 5.x? Auf dem iPad 1, auf dem iOS 4.x ausgeführt wird, befindet sich keine Registerkartenleiste unter der Adressleiste.
Ericson578
Ericson578: Diese sind alle für iPad 1.
Paul Rademacher
2
1024x1024 ist das ein Tippfehler?
Ciantic
@Ciantic Kein Tippfehler, fürchte ich.
Kim3er
13

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 hinein- und herauszoomen.

Sie können Ihre Seite jedoch so gestalten, dass der erforderliche Zoom minimiert wird. Am besten passen Sie Breite und Höhe an die niedrigere Auflösung des iPad an, da Sie nicht wissen, in welche Richtung es ausgerichtet ist. Mit anderen Worten, Sie würden Ihre Seite 768 x 768 erstellen, sodass sie gut auf den iPad-Bildschirm passt, unabhängig davon, ob sie auf 1024 x 768 oder 768 x 1024 ausgerichtet ist.

Noch wichtiger ist, dass Sie Ihre Seite mit großen Steuerelementen mit viel Platz gestalten möchten, die leicht mit den Daumen getroffen werden können. Sie können problemlos eine 768 x 768-Seite entwerfen, die sehr überladen war und daher viel Zoomen erfordert. Um dies zu erreichen, sollten Sie Ihre Steuerelemente wahrscheinlich auf mehrere Webseiten aufteilen.

Auf der anderen Seite ist es nicht die lohnendste Verfolgung. Wenn Sie beim Entwerfen Möglichkeiten finden, Ihre Seite "fingerfreundlicher" zu gestalten, dann entscheiden Sie sich dafür ... aber die Realität ist, dass iPad-Benutzer sich sehr gut bewegen und hinein- und herauszoomen können, um zu den Dingen zu gelangen, weil Dies ist auf den meisten Websites erforderlich. Wenn überhaupt, möchten Sie es wahrscheinlich so gestalten, dass es dieser Art der Navigation förderlich ist.

Erstellen Sie Felder mit relevanten gruppierten Daten, auf die Sie leicht doppelt tippen können, um sich darauf zu konzentrieren, und halten Sie die zugehörigen Steuerelemente nahe beieinander. iPad-Benutzer werden höchstwahrscheinlich eine Seite zu schätzen wissen, die die vertraute Zoom-and-Pan-Navigation erleichtert, an die sie gewöhnt sind, mehr als eine Seite mit weniger Steuerelementen, damit sie dies nicht müssen.

makamatisch
quelle
Ich danke Ihnen vielmals für die Antwort. Genau. Ich kann mir noch kein iPad leisten. Ich habe den Eindruck, dass die meisten Leute Webseiten eher im Hochformat als im Querformat betrachten. Ich weiß, ich würde. Und danke für die fingerfreundliche Erinnerung. Sehr richtig! Vielen Dank. Erik
Erik
4
768x1024 berücksichtigt nicht die Größe der URL-Leiste und der Registerkarten und ist je nach iPad unterschiedlich (1 oder 2 und zwischen iOS 4 und 5)
Ericson578
0

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{

        }
    }
José Moreira de Freitas Junior
quelle