Navigateur iPad norme WIDTH & HEIGHT

Est-ce que quelqu’un connaît 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

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

Lorsque la page n’a pas de balise meta viewport:

  • Portrait: 980×1208
  • Paysage: 980×661

Lorsque la page a l’une de ces deux balises meta:

  • Portrait: 768×946
  • Paysage: 1024×690

Avec :

  • Portrait: 768×946
  • Paysage: 768×518

Avec :

  • Portrait: 980×1024
  • Paysage: 980×1024

Avec :

  • Portrait: 768×1024
  • Paysage: 768×1024

Avec

  • Portrait: 768×1024
  • Paysage: 1024×1024

Avec

  • Portrait: 831×1024
  • Paysage: 1520×1024

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 Touches et les iPads, redimensionnera la page 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 768×768, de sorte qu’elle convienne bien à l’écran de l’iPad, qu’il soit orienté vers 1024×768 ou 768×1024.

Plus important encore, vous souhaitez concevoir votre page avec de gros contrôles avec beaucoup d’espace facile à toucher avec vos pouces – vous pouvez facilement concevoir une page 768×768 très encombrée et nécessitant donc beaucoup de zoom. Pour ce faire, vous souhaiterez probablement diviser vos contrôles entre plusieurs pages Web.

D’un autre côté, ce n’est pas la poursuite la plus intéressante. Si, en concevant, vous trouvez des opportunités de rendre votre page plus conviviale, alors allez-y … mais la réalité est que les utilisateurs d’iPad sont très à l’aise pour se déplacer et zoomer c’est nécessaire sur la plupart des sites Web. Si quelque chose, vous voulez probablement le concevoir pour qu’il soit propice à ce type de navigation.

Créez des boîtes avec des données groupées pertinentes qui peuvent être facilement doublées pour se concentrer et conserver les commandes associées les unes par rapport aux autres. Les utilisateurs d’iPad apprécieront très probablement une page qui facilite la navigation zoom-and-pan habituelle, à laquelle ils sont habitués par rapport à une page qui comporte moins de contrôles, ce qui les rend inutiles.

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{ } }