如何在桌面上显示时附加纯 jQuery 并在移动设备上显示时附加 jQuery Mobile？答案

【问题标题】：How can I attach plain jQuery when displayed on the desktop and attach jQuery Mobile when displayed on mobile?如何在桌面上显示时附加纯 jQuery 并在移动设备上显示时附加 jQuery Mobile？
【发布时间】：2011-07-29 13:00:34
【问题描述】：

我正在构建一个网站，我想在移动设备上使用 jQuery Mobile 来执行 javascript，但由于并非所有桌面浏览器都支持 jQuery Mobile，但我希望附加普通的 jQuery。我该怎么做？

【问题讨论】：

标签： javascript jquery mobile jquery-mobile desktop

【解决方案1】：

这是在客户端执行此操作的一种方法：

<html>
    <head>
        <script type="text/javascript">
              function isMobileDevice() {
                var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
              }
              function loadJQuery() {
                if(isMobileDevice())
                     document.write("<script type='text/javacript src='"+path_to_mobile_jquery+"'></script>");
                else
document.write("<script type='text/javacript src='"+path_to_normal_jquery+"'></script>");
              }
        </script>
    </head>
    <body onload="loadJQuery();">
      <!-- Content -->
    </body>
</html>

【讨论】：

【解决方案2】：

也许建立一个可能的浏览器类型的枚举，然后针对window.navigator.userAgent 进行测试？您可以使用像 Modernizr 这样的库来测试功能，但这不会让您获得实际的浏览器类型。（目前）还没有 userAgent 属性来识别浏览器类（台式机、平板电脑、移动设备等），因此您只能进行愚蠢的 UA 比较。

像51 Degrees 这样的项目旨在简化这种评估，但它们会产生隐性成本——即，51 度需要 10 秒以上的时间来评估客户端浏览器并相应地重定向。当然，在您的情况下，您需要条件样式——而不是重定向。这表明window.navigator.userAgent 检查可能适合if(true) document.write('<javascript resource />') 类型的方法。

【讨论】：

【解决方案3】：

您必须在服务器上测试浏览器请求标头（User-Agent），然后相应地绑定框架：

例如看 http://pgl.yoyo.org/http/browser-headers.php 用户代理：Mozilla/5.0（Windows；U；Windows NT 6.1；de；rv:1.9.2.18）Gecko/20110614 Firefox/3.6.18

【讨论】：