仅为移动设备加载JQuery Mobile脚本

时间:2012-07-05 09:58:48

标签: javascript mobile jquery-mobile

我的网页必须在移动设备上正确显示。 为此,我在页面的头部加载了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>

并在页面的body元素中使用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;
}

2 个答案:

答案 0 :(得分:14)

很难检测到您的设备是手机还是平板电脑还是带触摸的大屏幕, 但是从

开始
  1. 使用脚本从http://detectmobilebrowsers.com/
  2. 进行检测
  3. 使用http://yepnopejs.com/
  4. 进行测试

    像这样(应该适用于来自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文件。

答案 1 :(得分:2)

如何确定是否使用基于设备宽度的移动布局,如Twitter Bootstrap等CSS框架呢?这样,您可以使用jQuery mobile设计小型设备,还可以使用vanilla jQuery设计其他设备?我认为用yepNope或类似的测试仍然适用。