Я уже прочитал почти все вопросы о stackoverflow, связанные с этой проблемой, но ничего не работает так, как я ожидал.
Меня попросили обнаружить только устройство iPad (или в лучшем случае ~ 1024x768 мобильное устройство) с помощью медиа-запроса. Я попытался использовать
@media screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
...
}
, но этот медиа-запрос соответствует также Chrome (и Safari, я думаю) на ноутбуках и настольных компьютерах Win32 / MacOS, когда разрешение установлено на 1024x768 (но не firefox).Я пробовал этот медиа-запрос, определяющий ориентацию: портретную
и ориентацию: альбомную
, но безуспешно. Он также распознается в настольном веб-браузере.
Вы можете попробовать эту скрипку , чтобы проверить проблему.
После поиска я пришел к этой интересной статье , в которой говорится
. Я думаю, что Safari (и другие браузеры WebKit, в которых я тестировал) не соответствуют спецификации, в то время как Firefox и Opera.
Функция мультимедиа «ширина» описывает ширину целевой области отображения устройства вывода. Для непрерывных медиа это ширина области просмотра (как описано в CSS2, раздел 9.1.1 [CSS21]), включая размер отображаемой полосы прокрутки (если есть).
поэтому я попробовал это ( fiddle ) со 1009px как max-device-width
(1024-15)
@media screen and (min-device-width: 768px)
and (max-device-width: 1009px) {
...
}
и не работает
, но если я использую этот медиа-запрос, также определяющий ориентацию ( скрипка )
@media screen and (device-width:768px) and (orientation:portrait),
screen and (device-width:1009px) and (orientation:landscape) {
...
}
на удивление (для меня) , похоже, он работает правильно и, похоже, соответствует только сафари / iPad.
Q : Достаточно ли надежен этот медиа-запрос для моих нужд? Всегда ли работает в iPad / iPad2? Или мне нужно ожидать некоторых крайних случаев и неожиданного совпадения с каким-то другим разрешением устройства? В таком случае можете ли вы предложить более эффективный и надежный медиа-запрос?
Спасибо :) (и прошу прощения за многословие)