CSS reaguje design - wykryć wyświetlacz portret

Question

Wiem, że to z czystym CSS można dostosować stylów w zależności od wymiarów ekranu, tak:

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

jest z czystego css można sprawdzić na wyświetlaczu krajobrazowym lub portretowym?

Answer 1

Tak, używając następującej składni:

@media all and (orientation: landscape) {} 

Patrz w3 specs aby uzyskać więcej informacji.

Answer 2

Od w3:

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

Answer 3

Można użyć orientation:

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

Answer 4

Wszystkie odpowiedzi są błędne. Android zmieni się z portretu na krajobraz po wyświetleniu klawiatury.

Różne klawiatury wymagają również testów, ponieważ mogą zająć więcej miejsca w pionie. Klawiatura Swift zajmuje więcej miejsca w pionie, więc nie można używać takich rozwiązań, jak ekran @media i (min. Współczynnik proporcji: 13/9) {/ * style krajobrazu tutaj * /}, ponieważ nie będzie to możliwe na wielu telefonach.

Jedynym rozwiązaniem jest użycie javascript.

Na nowszych urządzeniach z Androidem można testować i używać nowego interfejsu api okna window.screen.orientation.

W systemie iOS można użyć window.orientation, które działa poprawnie. tj. Math.abs (window.orientation) === 90 to pejzaż

Jako awarię można użyć window.screen.width> window.screen.height, która obejmie naprawdę stare urządzenia z Androidem, które nie obsługują nowego okna .screen.orientation api

Wszystko co musisz zrobić, to dodać/usunąć zajęcia podczas zmiany rozmiaru/orientacji wydarzeń.