我有一个必须在移动设备上正确显示的网页.
为此,我在页面的头部加载了 JQuery Mobile脚本.头标签如下所示：
为此,我在页面的头部加载了 JQuery Mobile脚本.头标签如下所示：
<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>
并在页面的body元素中使用数据角色属性来显示东西.
这些页面在移动设备上看起来相当不错,但即使请求来自非移动浏览器,它也以类似的方式看起来.
我想知道如果有人知道一个方法来加载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/测试
像这样(应该适用于jQuery脚本从http://detectmobilebrowsers.com/)：
yepnope({
test : jQuery.browser.mobile,yep : 'mobile_specific.js',nope : ['normal.js','blah.js']
});
编辑：
另请参阅https://github.com/borismus/device.js,根据条件加载内容.我不确定它是否允许您加载条件JS文件.
