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

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

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

Tuttavia, c’è un modo per rilevare l’orientamento usando solo i 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 è a 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 abbiamo bisogno di scrivere query multimediali più specifiche. Assicurati di scrivere una query multimediale che non dovrebbe avere effetto sull’altra vista (Mob, Tab, Desk) altrimenti potrebbe essere un problema. Vorrei suggerire di scrivere una query multimediale di base per il rispettivo dispositivo che copre sia la visualizzazione che una media query di orientamento che è ansible codice specifico più sull’orientamento per vederlo per buona pratica. Non è necessario scrivere contemporaneamente entrambe le query di orientamento dei supporti. Puoi fare riferimento al mio esempio qui sotto. Mi dispiace se la mia scrittura inglese non è molto buona. Ex:

    Per 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. } 

    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

    fare come per i vostri requisiti di progettazione godere … (:

    Grazie, Jitu

    In Javascript è meglio usare screen.width e screen.height . Questi due valori sono disponibili in tutti i browser moderni. Danno le dimensioni reali dello schermo, anche se il browser è stato ridimensionato quando l’app si triggers. window.innerWidth cambia quando il browser viene ridimensionato, cosa che non può accadere sui dispositivi mobili ma può avvenire su PC e laptop.

    I valori di screen.width e screen.height cambiano quando il dispositivo mobile si inverte tra le modalità screen.width e orizzontale, quindi è ansible determinare la modalità confrontando i valori. Se screen.width è maggiore di 1280px hai a che fare con un PC o un laptop.

    È ansible build un listener di eventi in Javascript per rilevare quando i due valori vengono capovolti. La schermata verticale. I valori su cui concentrarsi sono 320 px (principalmente iPhones), 360 px (la maggior parte degli altri telefoni), 768 px (tablet di piccole dimensioni) e 800 px (tablet regolari).