Load JQuery Mobile Script Only For Mobile Devices

I have a web page that has to be correctly displayed on mobile devices. To do so, i loaded JQuery Mobile script in the page's head. The head tag looks like this:

Solution 1:

Its hard to detect whether your device is mobile or tablet or huge screen with touch, but to start with

1. Use script to detect from http://detectmobilebrowsers.com/
2. Test using http://yepnopejs.com/

Like this (should work for jQuery script from http://detectmobilebrowsers.com/) :

yepnope({
  test : jQuery.browser.mobile,
  yep  : 'mobile_specific.js',
  nope : ['normal.js','blah.js']
});

EDIT:

Also have a look at https://github.com/borismus/device.js, for loading content based on conditions. I am not sure whether it will allow you to load conditional JS files.

Solution 2:

How about determining whether to use a mobile layout based on device width, like CSS frameworks such as Twitter Bootstrap do? This way, you can design for small devices using jQuery mobile and for others with vanilla jQuery? Testing with yepNope or similar still applies, I think.