CSSを使用してJavaScriptをオフにしますか？

Question

私はメディアクエリを使用して、モバイル訪問者を別のモバイル固有のスタイルシートに誘導しました。問題は、インデックスページにJSを使用する要素があり、モバイル版でこれをオフにする必要があることです。これはどうすればいいですか？

追加注：私はJSに慣れていないよ - 私はHTMLとCSSで動作し、他の人々のJSを使用することができます： -/

以下のコメントのいくつかについては、私は原因負荷にモバイルでのロード時間が心配です不要なコード。誰かが私の要素に追加するものを教えてくれる人に親切になれば、モバイルでない場合にのみjsをロードするよう教えてもらえますか？それは正しい質問ですか？

Answer 1

メディアクエリでも同じ仕様を検出するスクリプトを使用しないのはなぜですか？その方法でスクリプトを選択的にアクティブにすることができます。

このようなスクリプトの1つは、古いブラウザでのメディアクエリをサポートするために、1140 CSS Gridフレームワーク内に存在します。あなたはそれをチェックアウトして、どのようにタップすることができるかを見ることができます。

Here's an articleここでは、画面の幅と高さを確認してメディアクエリ画面検出をエミュレートする方法について説明します。

ところで、 CSSはスタイリングのためのものです。

Answer 2

最適な解決策は、モバイル版に必要なスクリプトのみをロードすることです。多くのデバイスがデータキャップを持っているので、必要のないスクリプトをユーザーが読み込まないようにします。したがって、PHPやJavaScriptを使用してブラウザを検出し、プラットフォームに必要なファイルをロードします。

Answer 3

私は、ページにスクリプトが埋め込まれた要素があることを意味しているとします。最初に行う必要があるのは、要素のonclick属性などの埋め込みスクリプトを取り除くことです。これらのスクリプトは、独自の外部JSファイルに移動する必要があります。これが完了すると、サイトのモバイル版のJSファイルのみを含めることができます。

Answer 4

つのオプション：

あなたが唯一の非侵入型のJavascript（例えばjqueryの）を使用している場合は、デスクトップで、これは良い選択肢であるとき、他のすべてのスクリプトをロードするスクリプトを持つことができます。

もう1つの選択肢は、サーバー側の最初のスクリプトを生成しないことです。

Answer 5

おそらくメディアクエリは、モバイルユーザーに代替スタイルを提供するための最良のソリューションです。残念ながら、<script>要素がページロジックの場合に同様に処理するための属性はmediaではありません。

ただし、メディアクエリに基づいてブラウザによって選択されたスタイルシートに応じて、希望する.jsファイルをロードするスクリプトローダーを提供することはできます。私は直接、エレガントな方法でこれを行う方法を知らないが、それのための素敵なハックがあります。それぞれの.cssには、ブラウザによって適用されたスタイルシートを判断するために、ページがロードされた後にユニークな宣言（ダミー、設計上重要でない、または異なる）を「マーク」してJS内からチェックする必要があります。

CSSは次のようになります。次のように

@media handheld, screen and (max-width:1023px) { 
    body {margin-top: 1px} 
} 
@media screen and (min-width:1024px) { 
    body {margin-top: 0px} 
} 
/* These would be separate .css files in a real example */ 

とそれに付随するJS：

window.setTimeout('wait()', 10); 
function wait() { 
    if (!document.body) 
     window.setTimeout('wait()', 100) 
    else 
     onLoad(); 
} 

function onLoad() { 
    var load = document.createElement('script'); 
    var head = document.getElementsByTagName('head')[0]; 
    var body = document.getElementsByTagName('body')[0]; 
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top'); 
    switch (mark) { 
     case '0px': 
      load.setAttribute('src', 'handheld.js'); 
      break; 
     case '1px': 
      load.setAttribute('src', 'screen.js'); 
      break; 
     default: 
      load.setAttribute('src', 'somethingelse.js'); 
    } 
    head.appendChild(load); 
}