media Query for macbook pro 15"

Question

I'm trying to apply media query for laptop 15" and smaller with no success.

Here is my media query:

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { }

And:

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2)  and (min-resolution: 192dpi) { }

I works for 13inch macbook pro but no for the 15".

Any help would be much appreciated.

Thanks

Answer 1

It might be a problem with min-device-width, as it should only work on mobile devices (tablet, smartphones):

min-device-width

Try using those (without -device-) so you can test it on your computer's browser.

min-width or max-width

Styles for Desktop

@media screen and (min-width: 1025px) and (max-width: 1280px) {

   /* Styles for Desktops */
 }

Also add inside tag

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