Retina iPad Specific CSS

Question

I'm designing a responsive site that will look different on mobile devices. I have three separate media queries in my css plus a query for retina display(s).

/** 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) {}

When iPad is in portrait mode, it will get the mobile version, but when it's in landscape mode it will get the regular version of the site.

My problem is this, now with the "new iPad" and retina display, certain retina images are not aligned properly for the landscape retina iPad version. The global retina css is overruling the regular css and it's supposed to I guess.

For example, in the mobile version, I have an background image centred on the screen, but on the regular site, it's left aligned.

Anyone know of a way to target only retina images for iPad only in CSS?

Thanks

Edit: This is what I was playing around with but it doesn't seem to work:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

Answer 1

Figured it out.

I had my iPad Retina query below all other queries but they needed to be above the other queries starting from largest to smallest.

Answer 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
}

Answer 3

I had the same problem and I solved using:

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

For meta viewport I use:

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

I don't know if this is a perfect solution, but it works.