4

如果用户使用智能手机/平板电脑或笔记本电脑，我想加载不同的脚本。

这是我想要的结果：

笔记本电脑：

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

智能手机和平板电脑

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

我该怎么做？

4

1 回答 1

7

您正在查看嗅探用户代理以检测特定设备，或者您可以使用浏览器/屏幕宽度来确定您的用户属于哪个类别。

要根据浏览器宽度添加脚本，您可以执行以下操作：

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    (function ($) {

        //check if the browser width is less than or equal to the large dimension of an iPad
        if ($(window).width() <= 1024) {

            //create an AJAX request for the CSS file
            $.ajax({
                url     : 'jquery.mobile-1.2.0.min.css',
                success : function (response) {
                    $('head').append('<style>' + response + '</style>');
                }
            });

            //create an AJAX request for the JS file, setting the dataType to 'script' will have jQuery automatically evaluate the JS code in the global scope
            $.ajax({
                url      : 'jquery.mobile-1.2.0.min.js',
                dataType : 'script'
            });
        }
    })(jQuery);
</script>

不过，这有一些警告。

  1. 小型桌面浏览器可能很<=1024px宽，因此平板电脑和桌面用户之间会有一些重叠。
  2. JS/CSS 需要托管在您的 Web 服务器上，这样您就可以在没有跨域策略问题的情况下访问它们。

无论您如何检测移动/平板设备，CSS/JS 包含很可能对您有用。有一些脚本可以检测运行服务器端和客户端的设备，快速的 Google 搜索将显示其中许多脚本。但是我没有使用过这些脚本，所以我不能提供关于它们的使用的太多指导。

于 2013-02-13T22:40:13.053 回答