Javascript 仅为移动设备加载 JQuery Mobile 脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11341956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load JQuery Mobile script only for mobile devices
提问by giocarmine
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:
我有一个必须在移动设备上正确显示的网页。为此，我在页面的头部加载了 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>
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.
并在页面的 body 元素中使用 data-role 属性来显示事物。这些页面在移动设备上看起来相当不错，但即使请求来自非移动浏览器，它也会以类似的方式看起来。
I would like to know if someone knows a method to load JQuery Mobile script only if the request comes from a mobile device.
我想知道是否有人知道仅当请求来自移动设备时才加载 JQuery Mobile 脚本的方法。
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;
}
回答by Nachiket
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/
Like this (should work for jQuery script from http://detectmobilebrowsers.com/) :
像这样（应该适用于来自http://detectmobilebrowsers.com/ 的jQuery 脚本）：
yepnope({
test : jQuery.browser.mobile,
yep : 'mobile_specific.js',
nope : ['normal.js','blah.js']
});
EDIT:
编辑：
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.
另请查看https://github.com/borismus/device.js，用于根据条件加载内容。我不确定它是否允许您加载条件 JS 文件。
回答by savolai ?
How about determining whether to use a mobile layout based on device width, like CSS frameworks such as Twitter Bootstrap do? This way, you can design for small devices using jQuery mobile and for others with vanilla jQuery? Testing with yepNope or similar still applies, I think.
如何根据设备宽度确定是否使用移动布局，例如 Twitter Bootstrap 等 CSS 框架？这样，您可以使用 jQuery mobile 为小型设备进行设计，而使用 vanilla jQuery 为其他设备进行设计？我认为，使用 yepNope 或类似方法进行测试仍然适用。
