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


159

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

Risposte:


435

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


66
Nota: questo valore non corrisponde all'effettivo orientamento del dispositivo. L'apertura della tastiera virtuale sulla maggior parte dei dispositivi con orientamento verticale farà sì che il viewport diventi più largo di quanto sia alto, facendo in modo che il browser utilizzi gli stili di paesaggio anziché verticale.
Johann Combrink,

9
@JohannCombrink Davvero importante che tu l'abbia menzionato. L'apertura della tastiera confonderà il design. Bene, lo fai notare.
lowtechsun,

Riferimento per @ di JohannCombrink commento: stackoverflow.com/q/8883163/363448
ndequeker

4
Potrebbe non essere una brutta cosa applicare uno stile diverso quando la tastiera è spuntata perché l'area visibile è generalmente più adatta allo stile che si applica alla modalità orizzontale. Quindi potrebbe non essere un peccato.
Muhammad bin Yusrat

Mi piace il commento di Muhammad: se una tastiera software fa sì che una finestra sia più corta di quanto sia larga, la finestra sarebbe quindi un orientamento orizzontale (anche se si tiene normalmente il dispositivo fisico). Il CSS funziona come previsto a mio avviso.
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 */
}

ma sembra ancora che tu debba sperimentare


1
L'orientamento dipende dal dispositivo. Alcuni tablet riportano l'orientamento = 0 in modalità orizzontale. Gli iPhone riportano in modo diverso dalle galassie Samsung.
BlackMagic,

21

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


4

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


0

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


È importante notare che iOS NON capovolge i valori screen.widthe screen.heightquando l'iPhone viene ruotato. Riporta sempre gli stessi valori. È necessario utilizzare la window.orientationproprietà per determinare se il dispositivo è stato ruotato ... (il valore sarà 90 o -90 per la modalità orizzontale.)
interDist
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.