Navigateur iPad WIDTH & HEIGHT standard


125

Quelqu'un connaît-il la largeur et la hauteur les plus sûres pour le CORPS lors de la visualisation d'une page Web sur l'iPad? Je veux éviter les barres de défilement autant que possible.

Merci.

Erik


1
Voici un lien vers l'un des simulateurs basés sur le navigateur que vous pouvez utiliser pour tester le mode paysage de l'iPad http://alexw.me/ipad2/#!safari
Venkat - Open IT

Réponses:


277

La largeur et la hauteur des pixels de votre page dépendront de l'orientation ainsi que de la balise Meta Viewport, si elle est spécifiée. Voici les résultats de l'exécution de $ (window) .width () et $ (window) .height () de jquery sur le navigateur iPad 1.

Lorsque la page n'a pas de balise Meta Viewport:

  • Portrait: 980x1208
  • Paysage: 980x661

Lorsque la page a l'une de ces deux balises Meta:

<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">

  • Portrait: 768x946
  • Paysage: 1024x690

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

  • Portrait: 768x946
  • Paysage: 768x518

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

  • Portrait: 980x1024
  • Paysage: 980x1024

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

  • Portrait: 768x1024
  • Paysage: 768x1024

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

  • Portrait: 768x1024
  • Paysage: 1024x1024

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

  • Portrait: 831x1024
  • Paysage: 1520x1024

S'agit-il de l'ipad 2 sous iOS 5.x? ipad 1 exécutant ios 4.x n'a pas de barre d'onglets sous la barre d'adresse.
Ericson578

Ericson578: Ce sont tous pour ipad 1.
Paul Rademacher

2
1024x1024 est-ce une faute de frappe?
Ciantic

@Ciantic Pas une faute de frappe, j'en ai peur.
kim3er

13

Il n'y a pas de réponse simple à cette question. La version mobile d'Apple de WebKit, utilisée dans les iPhones, les iPod Touch et les iPad, mettra la page à l'échelle pour l'adapter à l'écran, à quel point l'utilisateur peut zoomer et dézoomer librement.

Cela dit, vous pouvez concevoir votre page pour minimiser la quantité de zoom nécessaire. Votre meilleur pari est de rendre la largeur et la hauteur identiques à la résolution inférieure de l'iPad, car vous ne savez pas dans quel sens il est orienté; en d'autres termes, vous feriez votre page 768x768, de sorte qu'elle s'adapte bien à l'écran de l'iPad, qu'elle soit orientée 1024x768 ou 768x1024.

Plus important encore, vous voudriez concevoir votre page avec de gros contrôles avec beaucoup d'espace qui sont faciles à frapper avec vos pouces - vous pouvez facilement concevoir une page 768x768 qui était très encombrée et nécessitait donc beaucoup de zoom. Pour ce faire, vous souhaiterez probablement diviser vos contrôles entre un certain nombre de pages Web.

D'un autre côté, ce n'est pas la poursuite la plus intéressante. Si, lors de la conception, vous trouvez des opportunités de rendre votre page plus «tactile», alors allez-y ... mais la réalité est que les utilisateurs d'iPad sont très à l'aise pour se déplacer et zoomer en avant et en arrière sur la page pour accéder aux choses parce que c'est nécessaire sur la plupart des sites Web. Si quoi que ce soit, vous voudrez probablement le concevoir pour qu'il soit propice à ce type de navigation.

Créez des boîtes avec des données groupées pertinentes sur lesquelles vous pouvez facilement appuyer deux fois pour vous concentrer et gardez les contrôles connexes proches les uns des autres. Les utilisateurs d'iPad apprécieront probablement une page qui facilite la navigation familière de zoom et de panoramique à laquelle ils sont habitués plus qu'une page qui a moins de contrôles pour ne pas avoir à le faire.


Je vous remercie beaucoup pour la réponse. Je suis d'accord. Je n'ai pas encore les moyens d'acheter un iPad. J'ai l'impression que la plupart des gens regarderont les pages Web en orientation portrait plutôt qu'en paysage. Je sais que je le ferais. Et merci pour le rappel Finger Friendly. Très vrai! Merci. Erik
Erik

4
768x1024 ne prend pas en compte la taille de la barre d'url et des onglets, et c'est différent selon l'ipad (1 ou 2, et entre ios 4 et 5)
Ericson578

0

Vous pouvez essayer ceci:

    /*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{

        }
    }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.