учитывая, что в JS довольно легко.... что-то вроде
if(window.innerHeight > window.innerWidth){
portrait = true;
}else{
portrait = false;
}
и я могу использовать это... но мне интересно, можно ли это сделать, используя только стили css и @media.
возможно ли что-то вроде
@media only screen and (width > height) {
//...
}
CSS для определения ориентации экрана:
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
Определение CSS-запроса CSS: 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 */
}
но по-прежнему выглядит так: эксперимент
Я думаю, нам нужно написать более конкретный медиа-запрос. Убедитесь, что вы пишете один мультимедийный запрос, это не должно влиять на другое представление (Mob, Tab, Desk), иначе это может быть проблемой. Я хотел бы предложить написать один базовый мультимедийный запрос для соответствующего устройства, которое будет охватывать как просмотр, так и один запрос на ориентацию, который вы можете использовать для конкретного кода, ориентированного на ориентацию, для его хорошей практики. Нам не нужно одновременно писать запрос на ориентацию медиа. Вы можете ссылаться на мой приведенный ниже пример. Прошу прощения, если мое английское письмо не очень хорошо. Пример:
Для мобильных устройств
@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.
}
Для планшета
@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.
}
Рабочий стол
сделайте согласно вашему потребностям дизайна... (:
Спасибо, Jitu
В Javascript лучше использовать screen.width и screen.height. Эти два значения доступны во всех современных браузерах. Они дают реальные размеры экрана, даже если браузер был уменьшен при запуске приложения. window.innerWidth изменяется, когда браузер уменьшен, что не может случиться на мобильных устройствах, но может произойти на ПК и ноутбуках.
Значения screen.width и screen.height изменяются, когда мобильное устройство переворачивается между портретным и ландшафтным режимами, поэтому можно определить режим, сравнивая значения. Если screen.width больше 1280px, вы имеете дело с ПК или ноутбуком.
Вы можете создать прослушиватель событий в Javascript, чтобы обнаружить, когда два значения перевернуты. Значения портрета screen.width для концентрации - 320 пикселей (в основном iPhones), 360 пикселей (большинство других телефонов), 768 пикселей (маленькие планшеты) и 800 пикселей (обычные планшеты).