Retina iPad Specific CSS

16
votes

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) {}
3
ipadcssmedia-queriesretina-display
The new iPad is 2048-by-1536... try that and the pixel-ratio: 2 – Connor
Thanks for the reply, tried it, nope, still doesn't work. @media screen and (min-device-width : 1536px) and (max-device-width : 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {} – user127181
Did you see my answer, and you're using an actual iPad3, right? – Connor
@user127181 Please add some code and description to your answer so that all can get it. Also I am having same issue currently. Please help! – Parixit
need more effective answers here answers not working properly – Anup

3 Answers

13
votes

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.

4
votes

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
votes

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.