Laden Sie das JQuery Mobile-Skript nur für mobile Geräte
Ich habe eine Webseite, die auf Mobilgeräten korrekt angezeigt werden muss. Zu diesem Zweck habe ich das JQuery Mobile-Skript in den Kopf der Seite geladen. Das head tag sieht so aus:
<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>
Und verwendet in den Hauptelementen der Seite die Datenrollenattribute, um Dinge anzuzeigen. Die Seiten sehen auf Mobilgeräten recht gut aus, sehen jedoch ähnlich aus, auch wenn die Anforderung von einem nicht mobilen Browser stammt.
Ich würde gerne wissen, ob jemand eine Methode zum Laden von JQuery Mobile-Skripten kennt, wenn die Anforderung von einem mobilen Gerät stammt.
Bisher habe ich versucht, eine Funktion zu verwenden, die meinen Benutzeragenten erkennt und das Skript lädt, wenn es sich um ein mobiles Gerät handelt:
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;
}