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

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

javascript mobile jquery-mobile

Javascript 仅为移动设备加载JQuery移动脚本,javascript,mobile,jquery-mobile,Javascript,Mobile,Jquery Mobile,我有一个必须在移动设备上正确显示的网页。为此，我在页面的头部加载了JQuery移动脚本。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://c

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


页面标题

并在页面的主体元素中使用数据角色属性来显示内容。这些页面在移动设备上看起来相当不错，但即使请求来自非移动浏览器，也会以类似的方式出现

我想知道是否有人知道只有当请求来自移动设备时才加载JQuery移动脚本的方法

到目前为止，我尝试使用一个函数来检测我的用户代理并加载脚本（如果它是移动设备）：

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;
}

函数init（）{
if（isMobile（））{
文件。写（“”）；
文件。写（“”）；
dcument.write（“”）；
}
}
函数isMobile（）{
if（navigator.userAgent.match（/Android/i）| navigator.userAgent.match（/BlackBerry/i）| navigator.userAgent.match（/iPhone | iPad | iPod/i）| navigator.userAgent.match（/IEMobile/i））
返回true；
返回false；
}

很难检测到您的设备是移动设备还是平板电脑还是触摸屏，但首先

使用脚本从

测试使用

如下所示（适用于来自的jQuery脚本）：

编辑：

另请看一看，用于根据条件加载内容。我不确定它是否允许您加载有条件的JS文件。

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

谢谢，尽管我发现用于检测移动浏览器的功能似乎可以工作，但DetectMobileBrowser肯定要好得多：）我的主要问题是如何基于该条件加载JQuery脚本：（使用detectmobilebrowser.com中提供的普通Javascript链接似乎我真的不需要有条件地加载js脚本，所以我认为您提供的所有链接都超出了我的需要：）再次感谢您！

yepnope({
  test : jQuery.browser.mobile,
  yep  : 'mobile_specific.js',
  nope : ['normal.js','blah.js']
});