Accessing CSS3 media queries from Javascript

Problem

Now, finally after 12 years, when all the world is hopping into CSS3 media query and responsive design bandwagon a problem remains.

How one can know from Javascript which media queries are

  • present in HTML code: this should be simple element traversing, but are there smarter ways?

  • effective (query evaluates to true)

... so you can add special code paths to support mobile, tablets, etc. in Javascript code? Eventually one could write function isMobile() and use it as a flag for certain actions specific to small screen estate.

Problem courtesy of: Mikko Ohtamaa

Solution

It is possible to have a specific object in your page that gets a known style from your CSS for each media query of interest. You can then read that style off the object with getComputedStyle() and see what was assigned to it and that would tell you which media query had precedence.

Solution courtesy of: jfriend00

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.