How to get the values that are used in media queries, e.g. device-width

Question

I understand using @media queries in CSS, e.g. to apply rules when the browser's window is larger than a certain amount.

I understand that I can also use window.matchMedia() in Javascript to figure out if a particular query matches.

But how can I actually get the current values of the media that are being used?

e.g. If I wanted to access the values for media (e.g. screen, tv...), orientation, monochrome, device-width or width or other Media Features Are these accessible through the DOM somewhere?

Possible duplicate of [Get the device width in javascript](http://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript) — Abhitalks, Jan 24 '17 at 13:15
No. Nothing in DOM. You need to use matchMedia to check whatever features you are looking for. I've retracted the duplicate vote. — Abhitalks, Jan 24 '17 at 13:31

score 1 · Answer 1 · answered Jan 24 '17 at 15:31

As @abhitalks said in the comments, it's not possible to get these values from the DOM.

Here's my workaround.

For simple things with a small set of known values you can test those with window.matchMedia() one at a time.

For numeric things that support the min- prefix in a query, e.g. device-width you can do something like this:

var ls, l=0, h=8192, c=parseInt((l+h)/2), i=20;
while (i > 0 && (c - l >1) && (h - c>1)) {
  i--; // Shouldn't take more than 13 guesses, but in case of bugs!
  if (window.matchMedia('(min-device-width: ' + c + 'px)').matches) {
    l=c; ls=0;
  } else {
    h=c; ls=1;
  }
  c = parseInt((h+l)/2);
}
c -= ls;
alert("Device width is: ", c);

codepen demo

How to get the values that are used in media queries, e.g. device-width

1 Answers1

Linked