Disable jQuery functions for certain media query widths
Posted on 2013-01-15
I am building a responsive website in which I use css3 media queries to detect the width in ems of the browser. For example:
<link href="/css/tablet-desktop.css" rel="stylesheet" media="all and (min-width: 33.236em)">
However I would like to disable certain JQuery functions for certain widths. For example I may want to disable an image magnifier for a product page when viewed on a mobile device. I may also want to disable the jQuery UI tabs function so the tabs collapse on top of each other when on a mobile device.
Is there a way to detect the width in ems of a browser in jQuery then use this to disable some jQuery functions?
Incidentally I do use modernizr but could not find any suitable functions to help me.