Retina display pixel ratio and media queries

Question

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

Answer 1

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

Answer 2

From the description of the problem it 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

Answer 3

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