Vers le bas l'échelle Mobile Safari largeur de la fenêtre d'affichage lorsque l'iPad est en orientation portrait?-

Je suis en train de travailler sur un site web qui est conçu pour fonctionner à son meilleur lors de l'affichage dans le mode paysage sur iPad. Tout est en 1024px de large <div> conteneur. Cependant, je suis encore nécessaire à l'échelle vers le bas de la fenêtre d'affichage ainsi, lorsque l'utilisateur active l'iPad en mode portrait, l'utilisateur n'a pas à effectuer un zoom arrière ou faites défiler horizontalement de tout voir sur la page.

Actuellement, j'ai cette <meta> balise dans mon <head>:

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />

Tout s'affiche bien lorsque la page est affichée en mode paysage, mais je ne peux pas obtenir le précitées nécessaire portrait comportement au travail. J'ai essayé de changer les initial-scale à 0.75, et l'exact contraire qui se produit: tout tient au mode portrait, mais qu'il reste encore espace horizontal lorsque l'iPad est en mode paysage.

Est-il CSS, Javascript ou spécial fenêtre d'affichage paramètre que je peux utiliser pour obtenir que cela fonctionne?

P. S. je ne peux pas utiliser user-scalable=no.

OriginalL'auteur Phil | 2011-06-29

  1. 14

    Vous pouvez même ajouter de l'orientation des propriétés au sein de la même CSS que vous utilisez pour les navigateurs de bureau...suffit d'ajouter le suivant;

    @media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */

@media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */

    Encore une fois rappeler pour iPad, device-width est toujours 768px, indépendamment de l'orientation...je sais que c'est confus, mais c'est la façon dont il est...

    Vous pouvez aussi consulter un très bon tutoriel sur la même au
    http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

    Merci pour votre réponse. Ce devrait être facile si j'ai utilisé pourcentage ou em conceptions basées en premier lieu...
    Oui...il serait alors s'afficher correctement dans les deux orientations..Merci..

    OriginalL'auteur testndtv

  2. 3

    Vous pouvez être en mesure d'utiliser l'orientation spécifique, CSS, comme ceci:

    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

    Dans ce cas, vous aurez probablement à régler les fenêtres de réglage pour les appareils de largeur et de prendre soin de la largeur réelle du contenu à l'aide de CSS. Par exemple, envelopper le tout dans une div avec la largeur appropriée pour chaque orientation, 1024px ou 768px (moins la barre d'état et le navigateur chrome est nécessaire).

    <meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />
    Merci, les deux hmthr et vos réponses sont très similaires, je souhaite que je pourrais marquer à la fois comme des réponses, mais hmthr réponse est ce que j'ai fini de l'utiliser.

    OriginalL'auteur John Kramlich