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).

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.