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

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) { ... }

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

@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

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

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

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).