web-dev-qa-db-ja.com

レスポンシブデザインでページに無駄なコンテンツが読み込まれないようにするにはどうすればよいですか？

レスポンシブデザインでは、要素はページ内で@mediaクエリとCSSのdisplay: noneで非表示になります。

OK。

ただし、私の設計では、幅が800px未満のブラウザは、一部のコンテンツをまったくロードしないようにする必要があります。

画面が800pxを超えるデバイスでアクセスすると、ページが完全に読み込まれます。幅が800px未満のモバイルデバイスまたはデスクトップでも、一部のコンテンツが非表示になります。

低解像度のデバイスではページの読み込みを高速化し、ユーザーに表示されないコンテンツのチャンクを読み込まないようにします。これについてどうすればいいですか？

javascripthtmlcss
4
Ícaro Leandro

私はこのことについて朝からずっと考えていました。これは非常に興味深い質問です。

私は、事実上の基準でもある クリスチャンが意図した解決策 は、進歩的な強化に反して機能する洗練されていない解決策だと思います。ユーザーがサイトのJavaScriptを有効にしていない場合、追加のグッズが表示されていないスリムなバージョンのWebサイトが表示されるだけなので、進歩的であると言えます。

しかし、私はこのアプローチが好きではありません。私はほとんどの場合ブラウザーでJavascriptを無効にしており、ほとんどの場合1024〜1280pxでウィンドウを実行しています。Javascriptオンロードを使用して800pxのベース用に設計されたサイトは、私にはかなり裸に見えます。

そうは言っても、私は解決策を考え出したのではないかと思います。

レスポンシブデザインに取り組む最善の方法は、追跡画像とサーバー側の介入を使用することだと思います。

あなたのスタイルシートでは、次のようにすることができます：

@media (screen and max-device-width(800px) {
    #sometag {
        background-image: url('track-800.gif');
    }
}

@media (screen and max-device-width(496px) {
    #sometag {
        background-image: url('track-496.gif');
    }
}

これで、画像がcookieが有効なドメインで提供される場合、WebブラウザーはセッションIDをサーバーに返し、その要求でセッションを有効にします。これらの画像がphp-scriptで提供されている場合、ユーザーが使用しているデバイスのサイズを追跡して保存できます。

現在、この情報がセッション変数に格納されているため、ユーザーのデバイス解像度では表示されないページの領域（以降のページのロード時）を無効にすることができます。

免責事項

この方法では、max-width（）クエリではなく、max-device-width（）メディアクエリを使用する必要があります。違いは、アプリケーションのサイズは、ウィンドウのサイズではなく、ユーザーのディスプレイのサイズに基づくことです。

2
Craige

コンテンツの遅延読み込みはどうですか？

画面の解像度やその他のパラメータを確認し、正しい値が満たされた場合にのみコンテンツをロードするJavaScriptを挿入します。

3
Christian

私見これは開発者としてではなく、ブラウザによって処理されるべきです。どうして？

1）800px未満の幅で低解像度の画像をロードする場合、デスクトップサイズの一部のみを使用してページをロードし（すべてのユーザーがブラウザーを最大化して実行しているわけではない）、「最大化」ボタンを押すデスクトップユーザーで何が起こりますか？

2）コンテンツが表示されているかどうかを検出するためにJavaScriptを使用すると、携帯電話のCPUとバッテリーが殺されるため、使用する場合は、乱用しないように十分注意してください。

レスポンシブデザインはクールな新しいテクニックですが、すべてが正しくなるまでには少し時間がかかります。 bostonglobe.comを見ると、ほとんどすべてのコンテンツがブラウザーの幅とは関係なく読み込まれていることがわかります:(

1
Miro Svrtan