web-dev-qa-db-fra.com

Media Queries - Css uniquement pour iPhone Landscape

Existe-t-il les mêmes méthodes pour écrire des CSS que pour l'iPhone en mode paysage?

iphonecsscss3media-queries
14
Dee

Tu pourrais faire ça

<meta name="viewport" content="width=device-width, 
    minimum-scale=1.0, maximum-scale=1.0">

Cela oblige l'iPhone à rendre la fenêtre d'affichage identique à la largeur de l'appareil.

Puis utilisez ce css pour cibler le mode paysage, qui est +320px wide 

@media screen and (min-width: 321px){
    //styles
}
14
Jason Gennaro

Oui bien sûr. Vérifier: http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Si vous voulez cibler uniquement l'iPhone, vous devez ajouter la résolution ou la densité de dppx à ces MQ.

26
Mattia Astorino

Si je vous ai bien compris et que vous souhaitez connaître les requêtes multimédia visant à cibler un smartphone tel que l'iPhone uniquement lorsqu'il est tenu horizontalement, essayez l'une des solutions suivantes:

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* styles go here */
    body {

    }
}
5
ajsharma

effectivement si vous utilisez:

<meta name="viewport" content="width=device-width, 
minimum-scale=1.0, maximum-scale=1.0">

vous empêchez alors l'utilisateur de zoomer à tout moment, ce qui peut poser des problèmes d'utilisation. 

Je vous recommanderais d'utiliser:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dans ce cas, vous forcez l'affichage de la page à son échelle initiale d'origine, ce qui vous permet de cibler différentes tailles de mise en page avec vos requêtes multimédia, car la mise en page sera redimensionnée lors de la rotation de votre iPhone:

@media only screen and (min-width: 480px) {
    /* landscape mode */
}

@media only screen and (max-width: 479px) {
    /* portrait mode */
}

Et l'utilisateur peut toujours pincer la page pour zoomer.

1
Nicolas Lagarde