How to use both media query and jqm on the same site
I use media query to handle the css for desktop and mobile version responsively.
<link rel="stylesheet" media="all and (min-width: 800px)" href="desktop.min.css" />
<link rel="stylesheet" media="all and (max-width: 799px)" href="mobile.css" />
How do I load jquery mobile file ONLY in mobile device? Now I load it using javascript:
if ($(window).width() < 800) {
$.getScript("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js");
}
The problem is with this some android device won't show the page. And if I rotate the device horizontally and the width is larger than 800, the jquery mobile file won't kick in unless I reload the page in the rotation event...
Any suggestion how to implement this a better way?