Navigateur iPad WIDTH & HEIGHT standard

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

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

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.

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{

        }
    }