How to check CSS media query with Javascript?

Question

on the following url:

https://gist.github.com/marcedwards/3446599

I found the following CSS code to check high DPI screens.

@media
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi) {
    /* Your code to swap higher DPI images */

}

This code is based on:

https://bjango.com/articles/min-device-pixel-ratio/

My question is: Is there any way to create a flag (true/false) based on if above conditions are meet or not?

My goal is: I have a set of images: <img src="..." /> where depending on the screen resolution (above condition meets or not) I wanna use one image or other.

Thanks!

Answer 1

As @Huangism and @phuzi pointed out, the way is to use: srcset. The only caveat about this is it is not supported by IE yet (as of today).

Answer 2

Could use some temporary element with a class to change on media query trigger to test:

HTML:

<p class="my-flag">Did the media query trigger?</p>

CSS:

@media
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi) {
    /* Your code to swap higher DPI images */

.my-flag {
   color: red;
 }
}

And if you need this check in JS just ask

if($('.my-flag').style.color == "red")) {
     /* do stuff */ 
}

Answer 3

You can use window.matchMedia() for media queries in javascript.

if (window.matchMedia("(min-width:640px)").matches) {
    // mathes
} else {
    // not mathes
}