Специфический 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" и сетчатки некоторые изображения сетчатки не выравниваются должным образом для версии 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) {}

Ответы

Ответ 1

Выяснил это.

У меня был запрос iPad Retina ниже всех других запросов, но они должны были быть выше других запросов, начиная с самого большого и самого маленького.

Ответ 2

Try:

@media only screen 
  and (min-device-width: 1536px)
  and (max-device-width: 2048px)
  and (orientation : landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
      // Retina iPad specific CSS
}

Ответ 3

У меня была та же проблема, и я решил использовать:

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)

Для метапортации я использую:

content="width=device-width; initial-scale=1; maximum-scale=1"

Я не знаю, является ли это идеальным решением, но оно работает.