iPad Browser WIDTH & HEIGHT Standard

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

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

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.

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{

        }
    }