1

How can I get my max-width media queries to work on retina displays? I have tried the website I have created on a macbook air and because the pixel ratio is 2 my media queries are active at the wrong screen widths.

here's an example of how I have used my media queries; 

@media only screen and (max-width: 1800px){ }
dippas
  • 58,591
  • 15
  • 114
  • 126
Reece
  • 2,581
  • 10
  • 42
  • 90
  • Can you elaborate? Were you expecting 900px or 3600px? Media queries, like all CSS, use CSS pixels, not hardware pixels — try to be specific about which you mean. – Josh Lee Sep 06 '17 at 13:29
  • You are required to post a minimal example of the markup that shows the problem: [mcve] – Rob Sep 06 '17 at 13:30
  • @Rob sorry, I'm doing it now – Reece Sep 06 '17 at 13:34

3 Answers3

3

you need to use -webkit-min-device-pixel-ratio: 2 to target retina 2x

something like this:

@media (-webkit-min-device-pixel-ratio: 2) { 
    /* Retina-specific stuff here */
}

or use something like these:

@media (-webkit-min-device-pixel-ratio: 2) and (max-width:1800px) { 
    /* Retina-specific stuff here */
}

More info about this, you can see in this article

dippas
  • 58,591
  • 15
  • 114
  • 126
  • Would that then make my max-width media query of 1800px active at 1800px and not 900px on retina – Reece Sep 06 '17 at 13:21
  • @Reece yes it would, if you use the last line I gave you as example, but if you want target `1800px` in retina and non-retina, then you need something else. Read the article I linked in the answer, it is fully detailed about this. – dippas Sep 06 '17 at 13:24
  • This is the wrong approach, see the answer with the meta tag. The tag is needed so that in all retina screens, your media query will work as expected – Huangism Jan 16 '20 at 20:41
  • For this question in concrete (which was my answer was for) that was not the problem as the meta tag was already in place. So I gave an alternative solution. Not a wrong approach as you say – dippas Jan 16 '20 at 20:49
3

From the description of the problem ot seems like you are not using the viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

The above should fix your problem.

See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • It might be, but I'm not sure that is the issue – dippas Sep 06 '17 at 13:25
  • I already have this in the head of my website. Not sure if it makes a difference but its a wordpress website. Thanks though – Reece Sep 06 '17 at 13:30
  • You might want to double check on your site because this tag is all you need for your usage of the media query. if it is not working, then maybe there is something else interfering with it but it should work – Huangism Jan 16 '20 at 20:44
-1

From Mike King's article on HD & Retina Display Media Queries (which I suggest reading, as it goes over CSS targeting for a variety of high-definition devices, not just Retina):

If you only want to target Retina displays, then setting min-device-pixel-ratio: 2 & min-resolution: 192dpi should be fine.

So therefore, you could do:

@media ((min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (max-width:1800px)) { 
    /* Your Retina-specific code goes here */
}
CodeBiker
  • 2,985
  • 2
  • 33
  • 36