web-dev-qa-db-fra.com

Comment détecter l'orientation du périphérique à l'aide de requêtes multimé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) { ... }
cssbrowsercss3tabletmedia-queries
134
Francesco

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 la suivante: http://www.w3.org/TR/css3-mediaqueries/#orientation

384
Richard Schneider
@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 toujours que vous devez expérimenter

32
mistagrooves

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, celle-ci ne sera pas affectée à 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 chaque périphérique qui couvre à la fois la vue et une requête multimédia d'orientation que vous pouvez coder de manière plus détaillée sur la vue d'orientation, c'est 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 vous référer à 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.

}

Burea

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

Merci, Jitu

13
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 lorsque l'application démarre. window.innerWidth change lorsque le navigateur est réduit, ce qui ne peut pas arriver sur les appareils mobiles mais peut arriver 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 utilisez 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 retournées. Les valeurs de portrait screen.width sur lesquelles se concentrer sont 320px (principalement les iPhones), 360px (la plupart des autres téléphones), 768px (petites tablettes) et 800px (tablettes standard).

0
BlackMagic