Надежный медиа-запрос для обнаружения только iPad (или, в лучшем случае, мобильных устройств 1024x768) - PullRequest
Новая
       24

Надежный медиа-запрос для обнаружения только iPad (или, в лучшем случае, мобильных устройств 1024x768)

6 голосов
/ 09 февраля 2012

Я уже прочитал почти все вопросы о стековом потоке, связанные с этой проблемой, но ничего не работает, как я ожидал.

Мне было предложено обнаружить только устройство iPad (или прилучшее ~ 1024x768 мобильное устройство) с медиа-запросом.Я пытался использовать 

@media screen
       and (min-device-width: 768px)
       and (max-device-width: 1024px) {
   ...
}

, но этот медиа-запрос также совпадает с Chrome (и, наверное, Safari) на ноутбуках и настольных Win32 / MacOS, когда разрешение установлено на 1024x768 (но не на firefox).Я пробовал этот медиа-запрос, определяющий orientation:portrait и orientation:landscape, но безуспешно.Это также распознается в настольном webkit-браузере.

Вы можете попробовать эту скрипку , чтобы проверить проблему.

После поиска я пришел к этой интересной статье в котором указано

Я думаю, что 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) {
   ...
}

и не работает
, но , если я использую этот носительзапрос, также определяющий ориентацию ( fiddle ) 

@media screen and (device-width:768px) and (orientation:portrait),
       screen and (device-width:1009px) and (orientation:landscape) {
    ...
}

на удивление (для меня) кажется, что он правильно работает и, похоже, соответствует только сафари / iPad.

Q : достаточно ли надежен этот медиа-запрос для моих нужд?Всегда ли это работает в iPad / iPad2?Или я должен ожидать некоторые крайние случаи и неожиданное совпадение с некоторым другим разрешением устройства?В таком случае можете ли вы предложить более эффективный и надежный медиа-запрос?

Спасибо :) (и извините за многословие)

Ответы [ 2 ]

4 голосов
/ 10 февраля 2012

Попробуйте также проверить User Agent. Это нужно будет сделать не в CSS, а в другом, но это решит вашу проблему. Таким образом, вы можете увидеть, если это iPad или нет.

Подобные вещи обречены на неудачу, лучше быть в безопасности, чем сожалеть и использовать что-то, что работает.

1 голос
/ 27 сентября 2013

Исправлено не только ширина устройства, но и высота .

Это будет работать только в том случае, если будет идеально.

Взгляните на этот ответ для более глубокого обсуждения.

...