Min-width media query не работает на ipad?

Почему на iPad в ландшафтном режиме не отображается следующий медиа-запрос?

@media all and (min-device-width: 1000px) {
    css here
}

или

@media all and (min-width: 1000px) {
    css here
}

Я хочу, чтобы этот css предназначался для любого браузера шириной 1000 пикселей или более, а не только для ipads. По этой причине id скорее работает со вторым вариантом min-width, а не min-device-width, если это возможно. Обе версии отлично работают с firefox на моем ПК. Спасибо

Ответ 1

iPad всегда сообщает свою ширину как 768px и ее высоту как 1024px, поэтому вам нужно выяснить, как она поворачивается с помощью orientation и использовать min-device-height:1000px следующим образом:

     /* This will apply to all screens with a width 999px and smaller */
* {
     color:green;
     background-color:black;
}

     /*
       This will apply to all screens larger then 1000px wide 
       including landscape ipad but not portrait ipad. 
      */
@media (orientation:landscape) and (min-device-height:1000px),
       all and (min-width:1000px) {
    * {
        color:white;
        background-color:red;
    }
}

Результаты:

  • IPad
    • Портрет     - зеленый текст - черный фон
    • Пейзаж - белый текст   - красный фон
  • iPhone
    • Портрет     - зеленый текст - черный фон
    • Пейзаж - зеленый текст - черный фон
  • Компьютер (разрешение)
    • 1680x1050 - белый текст - красный фон
    • 800x600     - зеленый текст - черный фон

Использование chrome и firefox (кто-нибудь даже использует IE больше?)

Литература:
w3 медиа-запросы
Справка по CSS Safari
Оптимизация веб-контента

Ответ 3

Если вы обнаружите, что это отлично подходит для нового iPad

@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
    * {
        color:white;
        background-color:red;
    }
}

Ответ 4

Для записи я не уверен, почему

@media (min-width: 1000px) {

 /* css here */

}  

не работает для вас. Возможно, что-то изменилось с iPad, так как этот вопрос был впервые опубликован?

Вот рабочий пример:
live view: http://fiddle.jshell.net/panchroma/Bn4ah/show/
edit view: http://fiddle.jshell.net/panchroma/Bn4ah/

Также не забудьте включить

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

в заголовке вашей страницы.

Ответ 5

Я пытался использовать простой медиа-запрос:   @media только экран и (мин-ширина: 768 пикселей)   {css здесь} но я не стал бы запускать iPad 10.5 "Я тестировал, я увеличиваю его до 900 пикселей (для портрета), и он работал отлично, я думаю, из-за экрана сетчатки вам нужно компенсировать, он может отлично работать на старых iPads non-retina.