15

ここで、1行または2行のコードをオンザフライで探しています。

モバイルがJSをロードしない場合、htmlドキュメントのヘッドセクションに配置するコードを提供してくれる人は親切でしょうか?

これは、次の 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)"

とても感謝しています

4

5 に答える 5

29

与えられた: 「モバイルが 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 ピクセル以下の画面をターゲットにしますが、これは最初のステートメントに反します。したがって、スクリプトを小さな画面で実行し、大きな画面では実行しないように変更>します。<=

于 2012-05-09T01:46:52.550 に答える
13

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

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

ここからのスニペット

于 2012-07-13T01:20:27.703 に答える
9

使えるようになりました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/matchMedia http://caniuse.com/#feat=matchmedia

于 2016-12-23T11:41:39.183 に答える
5

このようにできます。

  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。

于 2012-05-09T01:46:57.413 に答える
1

これを行う最善の方法は、「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>');
}
于 2018-05-01T18:25:30.750 に答える