Search code examples
javascripthtmlcssmedia-queriesscreen-resolution

How to check CSS media query with Javascript?

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!

Solution

  • 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).