медиа-запрос минимальной ширины не работает на ipad?

#ipad #media-queries

#iPad #медиа-запросы

Вопрос:

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

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

Или

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

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

Ответ №1:

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
    • Портрет — зеленый текст — черный фон
    • Пейзаж — зеленый текст — черный фон
  • Компьютер (разрешение)
    • 1680×1050 — белый текст — красный фон
    • 800×600 — зеленый текст — черный фон

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

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

Комментарии:

1. Немного раздражает, что iPad работает таким образом, но спасибо за ваш ответ.

2. @jdln Np. Я согласен, что действительно должен быть лучший способ добиться этого. Надеюсь, в будущем появятся более качественные стандарты CSS для мобильных устройств и планшетов.

Ответ №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 , что атрибут может потребоваться.

Комментарии:

1. Ваш код работает на ipad, но я хочу настроить таргетинг на другие планшеты, а также на настольные браузеры шириной более 100 пикселей.

2. Похоже, добавление некоторого определения устройства javascript может быть для вас более надежным решением. Мне нравится modernizr с комбинацией пользовательского кода, который я написал для добавления браузера и версии в виде классов html, поэтому я точно знаю, с чем я работаю. Я просто недостаточно доверяю браузерам, чтобы делать то, что они должны, поэтому мне нравится находить проблемы, связанные с браузером, и атаковать их напрямую за несколько минут, вместо того, чтобы пытаться найти идеальное решение, которое занимает часы или дни.

3. Забыл упомянуть, что я думал, что с помощью javascript вы могли бы добавлять ширину и высоту браузера в качестве пользовательских классов <html>, которые вы могли бы добавить что-то вроде .min1000Width . Тогда у вас будет ванильный CSS без медиа-запросов, которые поймет даже наименее способный браузер.

Ответ №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 с момента публикации этого вопроса?

Вот рабочий пример:
просмотр в реальном времени: http://fiddle.jshell.net/panchroma/Bn4ah/show /
редактировать вид: http://fiddle.jshell.net/panchroma/Bn4ah /

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

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

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

Ответ №5:

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

Ответ №6:

Пытаясь написать медиа-запрос для планшета, я действительно столкнулся с проблемой занижения размеров iPad. Когда я пытался использовать @media screen and ( min-width: 768px ) , мои стили применялись к другим планшетным устройствам, но игнорировались iPad. Я начал играть с адаптивной моделью устройства в инструментах разработчика и наткнулся на решение. По какой-то причине мои стили будут применяться, когда я уменьшу размер экрана до 760px . Итак, я отредактировал медиа-запрос для чтения @media screen and ( min-width: 760px ) , и все начало работать, как ожидалось.