Я разрабатываю отзывчивый сайт, который будет выглядеть по-разному на мобильных устройствах. У меня есть три отдельных медиа-запроса в моем css плюс запрос для отображения сетчатки.
/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}
/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}
/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}
/** RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}
Когда iPad находится в портретном режиме, он получит мобильную версию, но когда он будет в ландшафтном режиме, он получит обычную версию сайта.
Моя проблема заключается в том, что теперь с дисплеем "нового iPad" и сетчатки некоторые изображения сетчатки не выравниваются должным образом для версии IPad ландшафтной сетчатки. Глобальная сетчатка css перекрывает регулярный css, и я предполагаю, что это возможно.
Например, в мобильной версии у меня есть фоновое изображение, центрированное на экране, но на обычном сайте оно выравнивается влево.
Кто-нибудь знает способ нацеливать только изображения сетчатки для iPad только в CSS?
Спасибо
Изменить: Это то, с чем я играл, но, похоже, не работает:
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}