仅为移动设备加载JQuery Mobile脚本 [英] Load JQuery Mobile script only for mobile devices
问题描述
我的网页必须在移动设备上正确显示。
为此，我在页面的头部加载了JQuery Mobile脚本。 head标签如下所示：
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>
并在页面的body元素中使用data-role属性来显示内容。
这些页面在移动设备上看起来相当不错，但即使请求来自非移动浏览器，它也会以类似的方式显示。
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.
我想要知道是否有人知道加载JQuery Mobile脚本的方法，只有当请求来自移动设备时。
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;
}
推荐答案
很难检测到你的设备是移动设备或平板电脑或带触摸的大屏幕，
但开始时
Its 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/
喜欢这个（应该从 http://detectmobilebrowsers.com/ 开始使用jQuery脚本：
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']
});
编辑：
另请参阅 https://github.com/borismus/device.js ，用于根据条件加载内容。我不确定它是否允许你加载条件JS文件。
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.
这篇关于仅为移动设备加载JQuery Mobile脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
