CSS для Retina iPad

Я разрабатываю адаптивный сайт, который будет выглядеть иначе на мобильных устройствах. У меня есть три отдельных медиа-запроса в моем 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) {}
16
задан user127181 20 March 2012 в 11:50
поделиться