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

User-Agentをスニッフィングして特定のデバイスを検出するか、ブラウザ/画面の幅を使用してユーザーがどのカテゴリに該当するかを判断することができます。

ブラウザの幅に基づいてスクリプトを追加するには、次のようにします。

<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 に答える