web-dev-qa-db-ja.com

モバイルデバイスの場合、jsをロードしないようにhtmlドキュメントに指示します

私はここでその場で1、2行のコードを生意気に探しています：

誰かが親切に、モバイルの場合はJSをロードしないというhtmlドキュメントのheadセクションに配置するコードを提供できますか？

これは、次のCSSメディアクエリと組み合わせて使用​​されています。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="m/styles_mobile.css" />

したがって、同じルールに基づくコードを探しています：media = "only screen and（max-device-width：480px）"

とてもありがたいです

javascriptmedia-queries
12
Doug Fir

与えられた：「モバイルの場合JSをロードしない」、そして「モバイル」が480ピクセル以下の幅の画面によって定義されていると仮定すると、次のようなものが機能するはずです。

<script>
if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
</script>

これにより、画面の幅が480ピクセルを超える場合にのみ、スクリプト要素が追加されます。

OPのCSSルールは次のとおりです。

<... media="only screen and (max-device-width: 480px)" ...>

これは、最初のステートメントとは逆に、480ピクセル以下の画面をターゲットにします。したがって、スクリプトを小さな画面で実行し、大きな画面では実行しない場合は、>を<=に変更してください。

25
RobG

以前の回答がRetinaディスプレイでどのように機能するかはわかりません。私は次のようなことをします：

if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
 document.write('<script type="text/javascript" src="foo.js"><\/script>');

ここ からのスニペット

12
Dave

これで、window.matchMediaを使用できるようになりました

if (window.matchMedia("(min-width: 480px)").matches) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}

https://developer.mozilla.org/docs/Web/API/Window/matchMediahttp://caniuse.com/#feat=matchmedia

8
marcus

あなたはこのようにそれを行うことができます。

  1. 画面の幅と高さをテストして、モバイルデバイスかどうかを確認します。
  2. JavaScriptを使用してスクリプトをロードします。

あなたができることはこれです：

var scripts = ["foo.js",       //Put all your scripts here.
               "bar.js"];

if(screen.width <= 480){
    for(var i=0;i<scripts.length;i++){
              //-with jQuery (one line!)-
        $("head").append('<script type="text/javascript" src="'+scripts[i]+'"><\/script>');
                 //-or jQuery free-
        var scriptEle = document.createElement("script");
        scriptEle.setAttribute("type","text/javascript");
        scriptEle.setAttribute("src",scripts[i]);
        document.getElementsByTagName("head")[0].appendElement(scriptEle);
    }
}

screen.width <= 480であることに注意してください。

5
Derek 朕會功夫

これを行う最良の方法は、「foo.js」ファイル内の実際のモバイルスクリプト全体に追加することです。突然タグを追加すると、DOMはタグの読み込みに問題が発生します。

if (screen && screen.width > 480) {
 // Whole your script here
}

の代わりに：

if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
0
user3423593