Retina iPad для конкретного CSS - PullRequest
Новая
       8

Retina iPad для конкретного CSS

16 голосов
/ 20 марта 2012

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

Ответы [ 3 ]

13 голосов
/ 21 марта 2012

Разобрался.

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

4 голосов
/ 20 марта 2012

Попробуйте: 

@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 голосов
/ 27 июня 2012

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

@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"

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

...