Come rilevare l'orientamento del dispositivo utilizzando le query multimediali CSS?

In JavaScript la modalità di orientamento può essere rilevata usando:

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

Tuttavia, esiste un modo per rilevare l'orientamento utilizzando solo CSS?

Per esempio. qualcosa di simile a:

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

CSS per rilevare l'orientamento dello schermo:

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

La definizione CSS di una query multimediale è disponibile all'indirizzo 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 */
}

ma sembra ancora che tu debba sperimentare

Penso che dobbiamo scrivere una query media più specifica. Assicurati di scrivere una query multimediale che non dovrebbe avere effetto su un'altra vista (Mob, Tab, Desk) altrimenti potrebbe essere un problema. Vorrei suggerire di scrivere una media query di base per il rispettivo dispositivo che coprono sia la view che la media query di orientamento che è possibile specificare codice più sull'orientamento per la sua buona pratica. non è necessario scrivere entrambe le query di orientamento multimediale contemporaneamente. Puoi fare riferimento al Mio esempio di seguito. Mi dispiace se la mia scrittura inglese non è molto buona. Ex:

Per dispositivi mobili

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

}

Per tablet

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

}

Desktop

fai secondo le tue esigenze di progettazione goditi ... (:

Grazie Jitu

Vorrei proporzioni, offre molte più possibilità.

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

Sia l'orientamento che le proporzioni dipendono dalle dimensioni effettive della finestra e non hanno nulla a che fare con l'orientamento del dispositivo stesso.

Per saperne di più: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

In Javascript è meglio usare screen.widthe screen.height. Questi due valori sono disponibili in tutti i browser moderni. Forniscono le dimensioni reali dello schermo, anche se il browser è stato ridimensionato quando l'app viene avviata. window.innerWidthcambia quando il browser viene ridimensionato, il che non può accadere sui dispositivi mobili ma può accadere su PC e laptop.

I valori di screen.widthe screen.heightcambiano quando il dispositivo mobile passa tra le modalità verticale e orizzontale, quindi è possibile determinare la modalità confrontando i valori. Se screen.widthè maggiore di 1280 px, hai a che fare con un PC o un laptop.

È possibile costruire un listener di eventi in Javascript per rilevare quando i due valori vengono invertiti. I valori dello schermo verticale su cui concentrarsi sono 320 pixel (principalmente iPhone), 360 pixel (la maggior parte degli altri telefoni), 768 pixel (compresse piccole) e 800 pixel (compresse normali).