Дифференциация между портретным режимом на карманных устройствах и настольных компьютерах
Я ищу надежное правило для медиа-запросов, которое:
If desktop width < 720px AND devices in portrait mode {}
(т.е. по мере того, как ширина уменьшается на рабочем столе, медиа-запрос срабатывает на 720px. На телефонах это должно произойти только в режиме портретной ориентации - пейзаж не должен иметь примененный медиа-запрос)
Проблема заключается в следующем: как настроить таргетинг устройств отдельно от рабочих столов.
Проблема существует, потому что: @media handheld
не поддерживается
Дополнительно max-width
воздействует на все, поэтому его нельзя использовать в сочетании с max-device-width AND portrait
Похоже, я могу использовать только таргетинг:
- все устройства ниже/между настройками ширины
- (с использованием прокладки JavaScript для исправления медиа-запросов) ниже/между настройками ширины и ориентацией.
НЕ МОЖЕТ ОБРАТИТЬСЯ к устройствам и рабочим столам отдельно.
Есть ли существующее JavaScript-решение, которое удовлетворит мои потребности?
note Я кодирую свой CSS в LESS, медиа-запросы вложены внутри.
Фон
Сайт, над которым я работаю, является отзывчивым и использует сетку. При ширине использования ширины 720px (текущая ширина тестирования) используются меньшие устройства/разрешения. Однако при тестировании сайт (полный сайт шириной 720 пикселей) был приятно читаем в пейзаже, даже на моем маленьком экране HTC Desire. Поскольку я удаляю части сайта для лучшего удобства использования с помощью медиа-запросов, я думал, почему сайт не доступен в обычном режиме.
Bellow 720px на рабочем столе без изменения столбцов столбцов элемента видит довольно измельченный сайт. Однако из-за меньшей природы мобильного устройства это не так. Однако при модификации диапазона столбцов отдельные элементы просто несоразмерны (например, заголовок), когда речь идет о ландшафте на телефоне (из-за значительно уменьшенной высоты браузера).
Проще говоря, изменение дизайна исключительно на ширине браузера не распространяется на все устройства одинаково, как мне удалось добиться на других сайтах.
Я использую следующий метатег:
<meta name="viewport" content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=no" />
Что было проверено
Ориентация на рабочих столах не имеет отношения. Он изменяется в зависимости от настроек окна пользователя, разрешения и т.д. И т.д.
Я попробовал следующее настроить таргетинг на телефоны/оба:
@media handheld and (orientation:portrait) { }
Нет телефонов, которые, по-видимому, используют атрибут handheld
, по крайней мере, 100% нет - так что это бесполезно.
@media screen and (max-device-width:720px) and (orientation:portrait) { }
Будет работать отлично, но Android 2.2 и 2.3 (возможно, другие, не говоря уже о другой ОС?) имеют проблемы с max-device-width
не работают.
@media screen and (max-width:720px) and (orientation:portrait) { }
Работает на мониторах с высоким разрешением (так как высота быстро становится шириной при уменьшении ширины окна) и телефонах, но не работает на меньших мониторах, так как окна не будут портретами с шириной 720 пикселей (сайт продолжает конденсироваться за пределы я хотите).
@media screen and (max-width:720px), screen and (orientation:portrait) { }
Будет делать то, что на первом месте. Не использовать.
@media screen and (max-width:720px), screen and (max-width:500px) and (orientation:portrait) { }
и
@media screen and (max-width:720px) { }
@media screen and (max-width:500px) and (orientation:portrait) { }
Все просто использует более крупный max-width
.
У меня также была скрипка с min/max-height
без успеха.
Ответы
Ответ 1
Я думаю, что лучший способ - согласно MDN (Mozilla Developer Network), используя window.innerHeight
документацию здесь и window.innerWidth
документация здесь, где он измеряет ширину и высоту браузера в пикселях для определения ориентации.
//Detect mobile platform
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if ( isMobile.any() ) {
if (window.innerHeight > window.innerWidth) {
console.log("Orientation is in portrait");
}
else {
console.log("Orientation is in landscape");
}
}
else {
console.log("Mobile platform not detected.");
};
Дополнительная документация для mobile.
Ответ 2
Ну, эти три правила охватывают большинство мобильных устройств.
только экран @media и (min-width: 768px) и (max-width: 959px)
@media и (min-width: 480px) и (max-width: 767px)
@media только экран и (максимальная ширина: 479 пикселей)
В качестве альтернативы попробуйте использовать адаптивную структуру Skeleton
Ответ 3
Вы должны посмотреть Modernizr. Он включает в себя функции обнаружения/вывода для практически всех полезных современных функций браузера, в частности, включает ли устройство сенсорный интерфейс с помощью простой булевой проверки на Modernizr.touch
. Оттуда вы сможете уйти с тестированием портрета/пейзажа, сравнивая document.width с документом .height, что-то вроде:
if(Modernizr.touch) {
// is touch device
if(document.height > document.width) {
// is in portrait
} else {
// is in landscape
}
} else {
// not touch device
}
Обратите внимание, что, как вы обнаружили, нет совершенного теста для touch/desktop, поэтому, если вы включите тест Touch Modernizr (или покажете свой собственный), было бы неплохо проконсультироваться с этим которая объясняет, какие сенсорные тесты являются надежными, когда.
Ответ 4
Для полноты это объясняет, как использовать селекторы CSS, чтобы квалифицировать использование медиа-запросов в контексте вложенного LESS.
@enginefree answer и следующие комментарии, объяснили, как проверить мобильное устройство, его ориентацию и управлять атрибутами элементов на основе результата.
Следующий код иллюстрирует использование селекторов LESS &
и CSS3 :not
для отображения наших медиа-запросов, когда атрибут или класс, который мы ищем, не обнаружен:
body {
/* this has the possible class or data attribute of 'mobile' */
/* this is not included in the nest as you can't climb at will */
/* the class or attribute (via our JavaScript) could be applied
to any element that sits above and outside of `#level-1` in
this example */
}
#level-1 {
#level-2 {
#level-3 {
#level-4 {
body:not(.mobile) & {
/* produces the following CSS */
/* body:not(.mobile) #level-1 #level-2 #level-3 #level-4 { } */
/* rules in this block will only be executed if body does not have a mobile class */
@media screen and (max-width:) {
}
}
body:not([data-device=mobile]) & {
/* produces the following CSS */
/* body:not([data-device="mobile"]) #level-1 #level-2 #level-3 #level-4 { } */
/* rules in this block will only be executed if body does not have a mobile data-device attribute */
@media screen and (max-width:) {
}
}
}
}
}
}
Если элемент body
был частью этого гнезда, вы получите следующий CSS, и это должно объяснить, почему элемент должен существовать вне области гнезда, а также над ним:
body:not(.mobile) body #level-1 #level-2 #level-3 #level-4 { }
Подробнее об операторе &
Ответ 5
Большая библиотека javascript css3-mediaqueries-js.