How do I test a responsive website on a Retina Macbook?

Question

So I have created my responsive website. When I test it on a PC and resize the browser to check the smaller screen sizes work correctly, all is fine.

When I test on my primary machine, which is a MacBook Pro Retina, if I resize the browser down to smaller sizes the width of the content is too big.

I presume that this is to do with the fact that I am using the retina display. Is there something I need to do differently in my CSS.

My responsive CSS section looks like this...

@media screen and (min-width: 220px) and (max-width: 300px),
handheld and (min-width: 220px) and (max-width: 300px),
screen and (min-device-width: 220px) and (max-device-width: 300px) {

....

}

@media screen and (min-width: 300px) and (max-width: 440px),
handheld and (min-width: 300px) and (max-width: 440px),
screen and (min-device-width: 300px) and (max-device-width: 440px) {

....

}


@media screen and (min-width: 440px) and (max-width: 720px),
handheld and (min-width: 440px) and (max-width: 720px),
screen and (min-device-width: 440px) and (max-device-width: 720px) {

....

}

@media screen and (min-width: 720px) and (max-width: 980px),
handheld and (min-width: 720px) and (max-width: 980px),
screen and (min-device-width: 720px) and (max-device-width: 980px) {

....

}

@media screen and (min-width: 980px) and (max-width: 1600px),
handheld and (min-width: 980px) and (max-width: 1600px),
screen and (min-device-width: 980px) and (max-device-width: 1600px) {

....

}

Answer 1

As connexo says, you don't have to use device-width in this case. device-width basically refers to the screen resolution of the device, meaning if you resize your browser on a desktop then the media queries might not come into effect.

Remember, retina displays can cram in twice the amount of pixels as a normal display.