0

コンピューターとハンドヘルド デバイスの両方で実行される Web ベースのアプリケーションを作成しています。

PC用とハンドヘルドデバイス用の2つのcssファイルを作成しています。

onload イベントで、外部の JavaScript を呼び出しています。ユーザー エージェントに基づいて CSS を動的にロードするコードを記述しました。

Google Chrome 開発者向けオプションでアプリケーションを実行してページを監査すると、JavaScript からの CSS の読み込みを回避するように指示されます。このアプローチがパフォーマンスの点で正しいか、または他の解決策があるか教えてください。

4

4 に答える 4

0

あなたはレスポンシブウェブデザインについて学ぶ必要があります。

レスポンシブウェブデザイン（多くの場合RWDと略される）は、さまざまなデバイス間で最適な表示エクスペリエンス（サイズ変更、パン、スクロールを最小限に抑えた簡単な読み取りとナビゲーション）を提供するようにサイトを作成するウェブデザインへのアプローチです（デスクトップコンピュータのモニターから携帯電話まで）。参照： http： //en.wikipedia.org/wiki/Responsive_web_design

レスポンシブウェブデザインチュートリアル：http ：//webdesignerwall.com/tutorials/sensitive-design-in-3-steps

于 2012-11-23T06:02:40.820 に答える
0

その警告から私が理解しているのは、JavaScriptを使用してCSSファイルをロードする代わりに、マークアップを使用してロードするということです。

これを実現する1つの方法は、JSからbody要素にクラスを追加し、CSSでそのクラスを使用して、デバイスに応じて要素がどのようにスタイル設定されるかを決定することです。別の方法は、デスクトップとモバイルで異なるCSSメディアクエリを使用することです。

常にではないにしても、ほとんどの場合、JSからCSSをロードすることを回避でき、すべてを1つのファイルに縮小して、パフォーマンスをさらに向上させることができるという利点があります。

一般的なヒントとして、私は常にCSSを使用して可能な限り多くのことを行い、レスポンシブデザインはJSなしで完全に実行可能です。

于 2012-11-23T06:03:12.943 に答える
0

メディアクエリについてご存知ですか？

于 2012-11-23T06:04:58.110 に答える
0

他の人が示唆しているように、レスポンシブ レイアウト、メディア クエリ、サーバー側のユーザー エージェント検出、またはそれらの組み合わせを使用して、デスクトップ ブラウザーとモバイル ブラウザーの両方で優れたエクスペリエンスを提供できます。

しかし、間違ったアプローチをとったかどうかも知りたいと思います。それが最善のアプローチではない理由のいくつかを以下に示します。

  1. 正しいスタイルシートがダウンロードされて適用されるまで、コンテンツのスタイルは解除されます。低速または不安定な接続を使用している場合、スタイルシートの読み込みに 10 秒ほどかかることがあり、その間、ごちゃごちゃした混乱が見られます。
  2. ユーザーエージェントを知っているだけではおそらく十分ではありません。画面の解像度は？ブラウザは全画面表示ですか？
  3. スタイルシートのロードは追加のリクエストです。不要なリクエストは避けてください。特に、ネットワーク遅延が各リクエストの完了に大きく影響するモバイル ネットワークでは注意してください。
  4. Javascript が有効になっていない可能性があります - ユーザーが Javascript を無効にしている場合、またはブラウザが Javascript をサポートしていない場合。あなたのウェブサイトはどうなりますか？

最新のブラウザーをターゲットにしている場合は、レスポンシブ レイアウトとメディア クエリを使用するようにしてください。ユーザー エージェント文字列の検出を回避するようにしてください。ただし、エッジ ケースでそれらを使用する必要がある場合は、元の要求の一部としてサーバー側で処理してください。

于 2012-11-23T06:32:20.683 に答える