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 Оптимизация веб-контента