2

Web サイトのレスポンシブ バージョンを作成しましたが、画像 (または Web サイトのサイズ) に問題があります。「pc」バージョンには画像があります。デザイン画像としましょう。

モバイル バージョンでは、この要素の表示: なしに設定しました。モバイル バージョンでは、このグラフィックを使用する必要はありません。

PC ブラウザー (Firefox、Chrome) で小さなウィンドウ (幅 500px としましょう) でページを開くと、携帯電話のようにすべてが優れたものでした。開発ツールを調べると、すべての画像がダウンロードされていることがわかります (この解像度では、画像には表示: なしまたは背景: なしがあります)。

質問: この解像度で必要な画像だけをダウンロードすることはできますか? ウィンドウ サイズを変更すると、他の画像のダウンロードが開始されます (これは通常のユーザーの動作ではありません。通常のユーザーはウィンドウ/ビューポートのサイズに制限がなく、Web サイトの表示中に変更しないでください。彼らが試してみると、必要に応じて、新しい画像が表示されるまで少し待ちます）？

ありがとう。

4

1 に答える 1

0

この PHP クラスを見てください。ページが解析され、サーバーからデスクトップに完全に送信されるため、PHP は、モバイル デバイスがページを表示しているかどうかをフィルター処理して、不要なコード (およびその後、そのコードを介して読み込まれる画像などのオブジェクト) を送信しないようにすることができます。

このページには、コードをどのように構築するかを理解するための良い例/ユースケースがあります。

PHP の実際の例

<?php
  include 'Mobile_Detect.php';
  $device = new Mobile_Detect;
  if ($device->isMobile()) {
    $images = FALSE;
  }
?>

^これはインクルード ファイルにあり、すべてのページにアクセスできます

<article>
  <header>
    <section id="author-name">
      <?php print $author_name ?>
    </section>
    <section id="author-img">
      <?php if($images): ?><img src="http://example.com/image.jpg" /><? endif; ?>
    </section>
  </header>
  <content class="article">
    <?php if($images): ?><img src="http://example.com/article1.png" class="article" /><? endif; ?>
    <h2 class="title article">Article Title</h2>
    <p class="content article">Blah blah blah blah blah article stuff</p>
  </content>
</article>
于 2013-10-26T09:55:49.957 に答える