Question

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

Answer 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>

Answer 2

也许构建一个可能的浏览器类型的枚举，然后针对window.navigator.userAgent进行测试？您可以使用Modernizr之类的库来测试功能，但这不会使您获得实际的浏览器类型。没有（尚）userAgent支持识别浏览器类（桌面，平板电脑，移动设备等），所以你很难做出愚蠢的UA比较。

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

Answer 3

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

e.g。看到 http://pgl.yoyo.org/http/browser-headers.php User-Agent：Mozilla / 5.0（Windows; U; Windows NT 6.1; de; rv：1.9.2.18）Gecko / 20110614 Firefox / 3.6.18

如何在桌面上显示简单的jQuery并在移动设备上显示时附加jQuery Mobile？

3 个答案: