Search code examples
javascriptjquerycssmedia-queries

CSS and Javascript Media Query Detection

From http://www.w3.org/TR/css3-mediaqueries/ we can see that there are many ways to declare media queries, eg:

(1) @media screen and (min-width: 400px) and (max-width: 700px) { … }

(2) @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

(3) @media screen and (device-aspect-ratio: 16/9) { … }

(4) @media screen and (device-width: 800px) { … }

And so on.

I would like to know if there is any way in javascript or in the browser that we can find which width ranges certain media queries apply to.

Eg (1) would be between 400 and 700 and (4) would be exactly 800

It seems like it would be tedious to parse the media query strings to determine this information. Is there an easier way?

Solution

  • Try this mediaquery bookmarklet: http://fhemberger.github.com/mediaquery-bookmarklet/