Load JQuery Mobile script only for mobile devices

Question

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:

<head> 
    <title>Page Title</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

And used in the page's body elements the data-role attributes to display things. The pages looks quite good on mobile devices, but it looks in a similar way even if the request comes from a non-mobile browser.

I would like to know if someone knows a method to load JQuery Mobile script only if the request comes from a mobile device.

What i've tried so far is to use a function that detectd my user agent and loads the script if it is a mobile device:

function init() {

    if(isMobile()) {
        document.write('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />');
document.write('<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>');
dcument.write('<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>');
    }
}


function isMobile() {

    if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i))
            return true;
        return false;
}

Nachiket · Accepted Answer · 2012-07-05T14:43:59.557

14

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

Use script to detect from http://detectmobilebrowsers.com/
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.

edited Jul 05 '12 at 14:43

answered Jul 05 '12 at 11:16

Nachiket

6,021
6
41
47

thank you, although the function i found to detect mobile browsers seems to work, detectmobilebrowsers surely is much more better :) my principal problem is how to load JQuery scripts based on that condition :( – giocarmine Jul 05 '12 at 12:25
use normal Javascript link provided in detectmobilebrowser.com – Nachiket Jul 05 '12 at 14:44
it seems that maybe i really don't need to do a conditional loading of js scripts, so i think that all the links you have provided are more than i need :) thank you again! – giocarmine Jul 05 '12 at 15:34

score 2 · Answer 2 · answered Oct 19 '12 at 15:37

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.

Load JQuery Mobile script only for mobile devices

2 Answers2

Linked