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=".1.0/jquery.mobile-1.1.0.min.css" />
<script src=".7.1.min.js"></script>
<script src=".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=".1.0/jquery.mobile-1.1.0.min.css" />');
document.write('<script src=".7.1.min.js"></script>');
dcument.write('<script src=".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;
}
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;
}
2 Answers
Reset to default 14Its 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.
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.