Почему на 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 на моем ПК. Спасибо
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;
}
}
Результаты:
Использование chrome и firefox (кто-нибудь даже использует IE больше?)
Литература:
w3 медиа-запросы
Справка по CSS Safari
Оптимизация веб-контента
Из 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.
Если вы обнаружите, что это отлично подходит для нового iPad
@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
* {
color:white;
background-color:red;
}
}
Для записи я не уверен, почему
@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">
в заголовке вашей страницы.
Я пытался использовать простой медиа-запрос: @media только экран и (мин-ширина: 768 пикселей) {css здесь} но я не стал бы запускать iPad 10.5 "Я тестировал, я увеличиваю его до 900 пикселей (для портрета), и он работал отлично, я думаю, из-за экрана сетчатки вам нужно компенсировать, он может отлично работать на старых iPads non-retina.