CSS адаптивный дизайн - обнаружить портрет дисплей

Question

Я знаю, что с чистым CSS можно адаптировать таблицу стилей в соответствии с размерами экрана, как это:

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

Является ли это с чистой css можно проверить на ландшафтном или портретном дисплее?

Answer 1

Да, используя следующий синтаксис:

@media all and (orientation: landscape) {} 

ВИДЕТЬ w3 specs для получения дополнительной информации.

Answer 2

От w3:

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

Answer 3

Вы можете использовать orientation:

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

Answer 4

Все ответы неверны. Когда клавиатура будет показана, Android будет меняться от портрета к пейзажу.

Различные клавиатуры также нуждаются в тестировании, поскольку они могут занимать больше вертикального пространства. Клавиатура Swift занимает больше места в вертикальном пространстве, поэтому вы не можете использовать такие решения, как экран @media и (min-aspect-ratio: 13/9) {/ * пейзажные стили здесь * /}, поскольку это не удастся на многих телефонах.

Единственное решение - использовать javascript.

На новых устройствах Android вы можете протестировать и использовать новое окно window.screen.orientation api.

На iOS вы можете использовать window.orientation, который отлично работает. т.е. Math.abs (window.orientation) === 90 - это пейзаж

И в качестве резервного можно использовать window.screen.width> window.screen.height, который будет охватывать действительно старые Android-устройства, которые не поддерживают новое окно .screen.orientation api

Тогда вам нужно только добавить/удалить класс при изменениях размера/ориентации.