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!

Are you asking if you can check device pixel ratio is above 1 or not using js? It is possible to set a flag in css and detect it with js. I would prefer you clarify exactly what you are after in what language first — Huangism
– Huangism, Commented Mar 29, 2018 at 15:05
I don't think this way would be the best way, but you could give the element for example opacity: 1 when that media query requirement is met. And check with javascript if the style of element a{ } equals opacity = 1 — Jeremy
– Jeremy, Commented Mar 29, 2018 at 15:07
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. — davidesp
– davidesp, Commented Mar 29, 2018 at 15:11
@davidesp I Imagine you want to use a bigger image for a dense screen so the image appears crystal clear, then you can use srcset on the image tag which requires no js developer.mozilla.org/en-US/docs/Learn/HTML/… — Huangism
– Huangism, Commented Mar 29, 2018 at 15:14

Rodrigo · Accepted Answer · 2018-09-11 03:38:46Z

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

edited Sep 11, 2018 at 3:38

Rodrigo

5,23811 gold badges61 silver badges107 bronze badges

answered Mar 29, 2018 at 16:16

davidesp

4,01213 gold badges46 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StefanBob · Accepted Answer · 2018-03-29 15:13:06Z

0

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

edited Mar 29, 2018 at 15:13

answered Mar 29, 2018 at 15:08

StefanBob

5,1182 gold badges35 silver badges43 bronze badges

1 Comment

davidesp Over a year ago

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.

Dmitry Shashurov · Accepted Answer · 2024-02-26 10:40:12Z

0

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

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

edited Feb 26, 2024 at 10:40

answered Feb 26, 2024 at 9:18

Dmitry Shashurov

1,83221 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to check CSS media query with Javascript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related