В JavaScript режим ориентации можно определить с помощью:
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
Однако есть ли способ определения ориентации только с помощью CSS?
Например. что-то вроде:
@media only screen and (width > height) { ... }
browser
css
tablet
media-queries
Francesco
источник
источник
но все равно похоже, что вы должны экспериментировать
источник
Я думаю, что нам нужно написать более конкретный медиа-запрос. Убедитесь, что если вы пишете один медиа-запрос, он не должен влиять на другое представление (Mob, Tab, Desk), иначе это может быть проблемой. Я хотел бы предложить написать один базовый медиа-запрос для соответствующего устройства, который охватывает как представление, так и один медиа-запрос ориентации, чтобы вы могли более детально описать код для ориентации и просмотреть его для хорошей практики. Нам не нужно писать оба запроса на ориентацию медиа одновременно. Вы можете сослаться на мой пример ниже. Я извиняюсь, если мой английский не очень хорош. Пример:
Для мобильных
Для планшета
рабочий стол
сделайте согласно вашему требованию дизайна наслаждайтесь ... (:
Спасибо джиту
источник
Я бы пошел на соотношение сторон, это предлагает гораздо больше возможностей.
И ориентация, и соотношение сторон зависят от фактического размера области просмотра и не имеют ничего общего с ориентацией самого устройства.
Подробнее: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f
источник
В Javascript лучше использовать
screen.width
иscreen.height
. Эти два значения доступны во всех современных браузерах. Они дают реальные размеры экрана, даже если браузер был уменьшен при запуске приложения.window.innerWidth
изменяется при уменьшении размера браузера, что не может происходить на мобильных устройствах, но может происходить на ПК и ноутбуках.Значения
screen.width
иscreen.height
меняются, когда мобильное устройство переключается между портретным и ландшафтным режимами, поэтому можно определить режим путем сравнения значений. Еслиscreen.width
больше 1280px, вы имеете дело с ПК или ноутбуком.Вы можете создать слушатель событий в Javascript, чтобы определить, когда два значения перевернуты. Значения портретного экрана: ширина экрана составляет 320 пикселей (в основном iPhone), 360 пикселей (большинство других телефонов), 768 пикселей (маленькие планшеты) и 800 пикселей (обычные планшеты).
источник
screen.width
иscreen.height
значения , когда iPhone повернут. Он всегда сообщает одинаковые значения. Вы должны использоватьwindow.orientation
свойство, чтобы определить, было ли устройство повернуто ... (значение будет 90 или -90 для ландшафтного режима.)