Navigateur iPad WIDTH & HEIGHT standard
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 et de la balise meta viewport, si elle est spécifiée. Voici les résultats de l'exécution des logiciels $ (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 contient 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
Il n'y a pas de réponse simple à cette question. La version mobile de WebKit d'Apple, utilisée dans les iPhones, les iPod Touch et les iPad, redimensionnera la page en fonction de l'écran, permettant ainsi à l'utilisateur de faire un zoom avant ou arrière librement.
Cela dit, vous pouvez concevoir votre page de manière à minimiser la quantité de zoom nécessaire. Votre meilleur choix est de faire en sorte que la largeur et la hauteur soient 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'il s'adapte bien sur l'écran de l'iPad, qu'il soit orienté à 1024x768 ou 768x1024.
Plus important encore, vous voudriez concevoir votre page avec de gros contrôles offrant beaucoup d’espace et faciles à lire avec votre pouce - vous pouvez facilement concevoir une page de 768 x 768 très encombrée et nécessitant par conséquent de nombreux zooms. Pour ce faire, vous souhaiterez probablement diviser vos contrôles entre plusieurs pages Web.
D'autre part, ce n'est pas la poursuite la plus intéressante. Si, lors de la conception, vous trouvez des possibilité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 avec les déplacements et les zooms avant et arrière de la page pour accéder aux éléments, car c'est nécessaire sur la plupart des sites Web. Si vous préférez, vous voulez probablement le concevoir de manière à ce qu'il soit propice à ce type de navigation.
Créez des boîtes avec les données groupées pertinentes sur lesquelles vous pouvez facilement taper deux fois, et gardez les contrôles connexes proches les uns des autres. Les utilisateurs d'iPad apprécieront probablement une page facilitant la navigation familière zoom-panoramique à laquelle ils sont habitués plus qu'une page comportant moins de contrôles pour ne pas être obligés de le faire.
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{
}
}