我有一个网页必须在移动设备上正确显示。 为此，我在页面头部加载了 JQuery Mobile 脚本。 head 标签如下所示:
<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>
并在页面的正文元素中使用数据 Angular 色属性来显示事物。 这些页面在移动设备上看起来相当不错，但即使请求来自非移动浏览器，它看起来也很相似。
我想知道是否有人知道仅当请求来自移动设备时才加载 JQuery Mobile 脚本的方法。
到目前为止我尝试的是使用一个函数来检测我的用户代理并加载脚本(如果它是移动设备):
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;
}
最佳答案
很难检测您的设备是手机还是平板电脑还是带触摸的大屏幕， 但从
开始- 使用脚本检测 http://detectmobilebrowsers.com/
- 使用 http://yepnopejs.com/ 进行测试
像这样(应该适用于 http://detectmobilebrowsers.com/ 的 jQuery 脚本):
yepnope({
test : jQuery.browser.mobile,
yep : 'mobile_specific.js',
nope : ['normal.js','blah.js']
});
编辑:
另请查看 https://github.com/borismus/device.js , 用于根据条件加载内容。我不确定它是否允许您加载条件 JS 文件。
关于javascript - 仅为移动设备加载 JQuery Mobile 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11341956/