медиа-запрос минимальной ширины не работает на iPad? - PullRequest
10 голосов
/ 11 октября 2011

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

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

Или

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

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

Ответы [ 5 ]

12 голосов
/ 13 октября 2011

iPad всегда сообщает, что его ширина составляет 768 пикселей, а высота - 1024 пикселей, поэтому вы должны выяснить, как он вращается с 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 медиазапросы Справочник по Safari CSS Оптимизация веб-контента

0 голосов
/ 27 июня 2017

Я пытался использовать простой медиазапрос, такой как: @media only screen и (min-width: 768px) {css here}, но я бы не стал запускать на iPad pro 10.5 ', на котором я тестировал, я увеличиваюон до 900px (для портрета), и он работал просто отлично, я думаю, что из-за дисплея сетчатки, который вы должны компенсировать, он может нормально работать на старых устройствах iPad без сетчатки.

0 голосов
/ 10 октября 2013

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

@media (min-width: 1000px) {

 /* css here */

}  

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

Вот рабочий пример:
просмотр в реальном времени: 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 голосов
/ 12 октября 2012

Если найдено, это прекрасно работает для нового iPad

@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
    * {
        color:white;
        background-color:red;
    }
}
0 голосов
/ 13 октября 2011

С 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 может потребоваться.

...