仅在移动设备上加载JQuery Mobile脚本

Question

仅在移动设备上加载JQuery Mobile脚本

12

我有一个网页，需要在移动设备上正确显示。为此，在页面头部加载了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>

使用页面主体元素中的data-role属性来显示内容。

该页面在移动设备上看起来很好，但即使请求来自非移动浏览器，它看起来也类似。

我想知道是否有人知道一种方法，只在请求来自移动设备时加载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;
}

- giocarmine

2个回答

2

如何确定是否基于设备宽度使用移动布局，就像Twitter Bootstrap等CSS框架所做的那样呢？这样，您可以使用jQuery mobile设计小型设备，并使用vanilla jQuery设计其他设备。我认为仍然需要使用yepNope或类似的工具进行测试。

- savolai ᯓ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nachiket · Accepted Answer

检测设备是否为移动设备、平板电脑或带有触摸屏的大屏幕是很困难的，但是可以从以下两种方式开始：

使用脚本从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文件。