#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 )
, и все начало работать, как ожидалось.