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

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

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

или

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

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

10
ipad media-queries

5 ответов

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 media queries
Safari CSS Reference
Оптимизация Веб-Контента

12

от 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; }
}

похоже

0

Если найдено, это отлично подходит для нового iPad

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

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

@media (min-width: 1000px) {

 /* css here */

}

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

вот пример:
live view:http://fiddle.jshell.net/panchroma/Bn4ah/show/
изменить вид: http://fiddle.jshell.net/panchroma/Bn4ah/

также обязательно включите 

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

в начале страницы.

0

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

0