Comment détecter l’orientation du périphérique à l’aide de requêtes média CSS?

En JavaScript, le mode d’orientation peut être détecté à l’aide de:

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

Cependant, existe-t-il un moyen de détecter l’orientation à l’aide de CSS uniquement?

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 de média est à l’ adresse 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 on dirait qu’il faut 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 poser problème. Je voudrais suggérer d’écrire une requête multimédia de base pour les périphériques respectifs qui couvrent à la fois la vue et une requête de support d’orientation que vous pouvez coder plus en détail sur la vue d’orientation et les bonnes pratiques. Nous n’avons pas besoin d’écrire les deux questions d’orientation sur les médias en même temps. Vous pouvez vous référer à l’exemple ci-dessous. Je suis désolé si mon écriture anglaise 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 votre exigence de conception profiter … (:

Merci Jitu

En Javascript, il est préférable d’utiliser screen.width et 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 lors du lancement de l’application. window.innerWidth change 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.width et screen.height changent 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.width est supérieur à 1280px, vous avez affaire à un PC ou à un ordinateur portable.

Vous pouvez construire un écouteur d’événement en Javascript pour détecter le basculement des deux valeurs. Les valeurs de largeur d’écran de portrait sur lesquelles se concentrer sont 320px (principalement des iPhones), 360px (la plupart des autres téléphones), 768px (petites tablettes) et 800px (tablettes ordinaires).