Comment détecter l'orientation de l'appareil à l'aide de requêtes multimédias CSS?


159

En JavaScript, le mode d'orientation peut être détecté en utilisant:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

Cependant, existe-t-il un moyen de détecter l'orientation en utilisant uniquement CSS?

Par exemple. quelque chose comme:

@media only screen and (width > height) { ... }

Réponses:


435

CSS pour détecter l'orientation de l'écran:

 @media screen and (orientation:portrait) {  }
 @media screen and (orientation:landscape) {  }

La définition CSS d'une requête multimédia est à http://www.w3.org/TR/css3-mediaqueries/#orientation


66
Remarque: cette valeur ne correspond pas à l'orientation réelle de l'appareil. L'ouverture du clavier virtuel sur la plupart des appareils en orientation portrait fera que la fenêtre deviendra plus large que haute, ce qui obligera le navigateur à utiliser des styles paysage au lieu de portrait.
Johann Combrink

9
@JohannCombrink Vraiment important, vous avez mentionné cela. Ouvrir le clavier gâchera la conception. Bon vous le signalez.
lowtechsun

Référence pour le commentaire de @ JohannCombrink: stackoverflow.com/q/8883163/363448
ndequeker

4
Ce n'est peut-être pas une mauvaise chose d'appliquer un style différent lorsque le clavier est ouvert car la zone visible est généralement plus adaptée au style qui s'applique au mode paysage. Donc, peut-être pas une déception.
Muhammad bin Yusrat

J'aime le commentaire de Muhammad: si un clavier logiciel fait qu'une fenêtre soit plus courte que large, la fenêtre serait donc une orientation paysage (même si vous tenez normalement le périphérique physique). Le CSS fonctionne comme prévu à mon avis.
Benny

36
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

mais il semble toujours que vous deviez expérimenter


1
L'orientation dépend de l'appareil. Certaines tablettes signalent l'orientation = 0 en mode paysage. Les iPhones rapportent différemment des Samsung Galaxies.
BlackMagic

21

Je pense que nous devons écrire une requête média plus spécifique. Assurez-vous que si vous écrivez une requête multimédia, cela ne devrait pas avoir d'effet sur une autre vue (Mob, Tab, Desk) sinon cela peut être un problème. Je voudrais suggérer d'écrire une requête multimédia de base pour le périphérique respectif qui couvre à la fois la vue et une requête multimédia d'orientation que vous pouvez spécifier plus en code sur la vue d'orientation, c'est pour une bonne pratique. nous n'avons pas besoin d'écrire les deux requêtes d'orientation des médias en même temps. Vous pouvez consulter mon exemple ci-dessous. Je suis désolé si mon écriture en anglais n'est pas très bonne. Ex:

Pour mobile

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Pour tablette

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Bureau

faire selon vos exigences de conception profiter ... (:

Merci, Jitu


4

J'opterais pour le rapport hauteur / largeur, il offre beaucoup plus de possibilités.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Les deux, l'orientation et le rapport hauteur / largeur dépendent de la taille réelle de la fenêtre et n'ont rien à voir avec l'orientation de l'appareil elle-même.

En savoir plus: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f


0

En Javascript, il est préférable d'utiliser screen.widthet screen.height. Ces deux valeurs sont disponibles dans tous les navigateurs modernes. Ils donnent les dimensions réelles de l'écran, même si le navigateur a été réduit lorsque l'application se déclenche. window.innerWidthchange lorsque le navigateur est réduit, ce qui ne peut pas se produire sur les appareils mobiles, mais peut se produire sur les PC et les ordinateurs portables.

Les valeurs de screen.widthet screen.heightchangent lorsque l'appareil mobile bascule entre les modes portrait et paysage, il est donc possible de déterminer le mode en comparant les valeurs. Si screen.widthest supérieur à 1280px, vous avez affaire à un PC ou un ordinateur portable.

Vous pouvez créer un écouteur d'événement en Javascript pour détecter le moment où les deux valeurs sont inversées. Les valeurs de largeur de l'écran portrait sur lesquelles se concentrer sont 320px (principalement les iPhones), 360px (la plupart des autres téléphones), 768px (petites tablettes) et 800px (tablettes ordinaires).


Il est important de noter qu'iOS ne retourne PAS les valeurs screen.widthet screen.heightlorsque l'iPhone est tourné. Il rapporte toujours les mêmes valeurs. Vous devez utiliser la window.orientationpropriété pour déterminer si l'appareil a été tourné ... (la valeur sera 90 ou -90 pour le mode paysage.)
interDist
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.