CSS reattivo progettazione - rilevare visualizzazione verticale

Question

Lo so che è con CSS puro possibile adattare il foglio di stile in base alle dimensioni dello schermo, in questo modo:

@media (max-width: 959px) { 
    /* styles for smallest viewport widths */ 
} 

@media (min-width: 600px) and (max-width: 959px) { 
    /* styles for mid-tier viewport widths */ 
} 

@media (min-width: 960px) { 
    /* original CSS styles */ 
} 

^(source)

è con puro css possibile controllare un display orizzontale o verticale?

Answer 1

Sì, utilizzando la seguente sintassi:

@media all and (orientation: landscape) {} 

Vedere la w3 specs per ulteriori informazioni.

Answer 2

Da w3:

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

Answer 3

È possibile utilizzare orientation:

@media all and (max-width: 959px) and (orientation : portrait) { 
    /* Styles */ 
} 

Answer 4

tutte le risposte sono corrette. Android passerà da verticale a orizzontale quando viene visualizzata la tastiera.

Anche le tastiere diverse devono essere testate in quanto possono occupare più spazio verticale. La tastiera Swift occupa più spazio verticale, quindi non puoi utilizzare soluzioni come @media screen e (min-aspect-ratio: 13/9) {/ * stili di paesaggio qui * /} in quanto ciò non funziona su molti telefoni.

L'unica soluzione è usare javascript.

Sui nuovi dispositivi Android è possibile testare e utilizzare il nuovo window.screen.orientation api.

Su iOS è possibile utilizzare window.orientation che funziona correttamente. es. Math.abs (window.orientation) === 90 is landscape

E come fallback puoi usare window.screen.width> window.screen.height che coprirà dispositivi Android molto vecchi che non supportano la nuova finestra .screen.orientation api

Quindi tutto quello che devi fare è aggiungere/rimuovere una classe sugli eventi di ridimensionamento/orientamento di scambio.