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;
}
