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
Оптимизация веб-контента

Ответ 2

Из http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .selector-01 { margin: 10px; }
    .selector-02 { margin: 10px; }
    .selector-03 { margin: 10px; }
}

Похоже, что может потребоваться атрибут screen.

Ответ 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.