124 votes

norme de largeur & hauteur navigateur iPad

Quelqu'un sait-il la largeur et la hauteur plus sûr pour le corps lorsque vous affichez une page web quelconque sur l’iPad ? Je veux éviter les barres de défilement autant que possible.

Merci.

Erik

276voto

Paul Rademacher Points 2194

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

Lorsque la page n'a pas de balise meta "viewport":

  • Portrait: 980x1208
  • Paysage: 980x661

Quand la page a l'une de ces deux meta tags:

<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

13voto

macamatic Points 368

Il n'y a pas de réponse simple à cette question. Mobile d'Apple version de WebKit, utilisé dans les iphone, iPod touch et ipad, à l'échelle de la page à l'écran, au point où l'utilisateur peut zoomer dans et librement.

Cela dit, vous pouvez concevoir votre page afin de minimiser la quantité de zoom nécessaire. Votre meilleur pari est de faire de la largeur et de la hauteur la même que la faible résolution de l'iPad, car vous ne savez pas de quelle manière elle est orientée; en d'autres termes, vous voulez faire de votre page 768x768, de sorte qu'elle s'adapte bien sur l'écran de l'iPad si elle est orientée à 1024x768 ou 768x1024.

Plus important encore, vous voulez créer votre mise en page avec de grosses commandes avec beaucoup d'espace et qui sont faciles à frapper avec vos pouces, vous pouvez facilement concevoir un 768x768 page qui a été très encombré et donc fallu beaucoup de zoom. Pour ce faire, vous aurez probablement envie de diviser vos commandes parmi un certain nombre de pages web.

D'autre part, c'est pas le plus qui en vaut la peine. Si lors de la conception de vous trouver des opportunités pour rendre votre page plus "finger-friendly", puis aller pour elle...mais la réalité est que les utilisateurs d'iPad sont très à l'aise avec les déplacer et de zoomer dans et hors de la page pour obtenir les choses parce que c'est nécessaire sur la plupart des sites web. Si quelque chose, vous voulez probablement à concevoir de telle sorte qu'il est propice à ce type de navigation.

Faire des boîtes avec les données groupées qui peuvent être facilement double-exploitées afin de se concentrer sur, et de maintenir les contrôles relatifs aux proches les uns des autres. les utilisateurs d'iPad les plus susceptibles d'apprécier une page qui facilite le familier du zoom et de panoramique de la navigation, ils sont habitués à plus qu'une page qui a le moins de contrôles, de sorte qu'ils n'ont pas.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X