Я разрабатываю адаптивный сайт, который будет выглядеть иначе на мобильных устройствах. У меня есть три отдельных медиа-запроса в моем 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» и дисплеем Retina, некоторые изображения Retina не выровнены должным образом для версии Retina iPad с альбомной ориентацией. Глобальный css сетчатки имеет приоритет над обычным css, и я думаю, что так и должно быть.
Например, в мобильной версии у меня есть фоновое изображение по центру экрана, но на обычном сайте оно выровнено по левому краю.
Кто-нибудь знает, как настроить таргетинг только на изображения Retina для iPad только в CSS?
Спасибо
Редактировать: это то, с чем я играл, но, похоже, это не работает:
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}