4

最近、レスポンシブ Web デザインについて調べています。「レスポンシブ Web デザイン」の傘下に入る多くの手法と実践がありますが、基本的に RWD の主な柱は CSS3mediaクエリのようです。したがって、RWD は基本的にクライアント側の戦略です。

しかし、低解像度のレイアウトでは、多くの場合、HTML のセクション全体を単純に削除する必要があります。たとえば、3 列のレイアウトは、低解像度では 1 列または 2 列のレイアウトにする必要がある場合があります。つまり、基本的DIVに低解像度では s 全体を非表示にしていることになります。ここで私が目にする問題は、実際には同じ量の HTML コードを低解像度のデバイスに送信する必要があることです。つまり、同じ 3 列分の HTML を高解像度の画面と低解像度の携帯電話に送信していますが、低解像度の携帯電話に送信するたびに帯域幅が完全に無駄になります。 .

質問:ここでの私の理解は正しいですか、それとも RWD にはサーバー側の手法も組み込まれていますか?

たとえば、次のような骨組みの HTML ページがあるとします。

<div id = "main-content">
  <!-- content goes here -->
</div>

そしてonload(または)、クライアント ブラウザーは画面の解像度を検出し、その解像度に適した HTML をonresize入力する AJAX 要求を作成します。main-content

サーバー側の戦略を利用して RWD を実装するこのような手法は、実際に使用されたことがありますか?

4

5 に答える 5

2

あなたはほとんどあなたの質問に答えます...

ウィンドウのサイズが変更されたときに ajax 呼び出しを行う必要がある時間は、html ページ全体を 1 回指定して代わりに css を使用するよりもはるかに長くなります。

レスポンシブ デザインの主な考え方は、コンテンツを非表示にしないことです。コンテンツを非表示にすると、検索エンジンがコンテンツを表示するなど、多くの問題が発生しますが、男性がタブレットで Web サイトにアクセスしても、コンテンツは表示されません。

編集：

コンテンツについて話すときに明確にするために、「アドセンス」などのページで重要なものや、訪問者にとって重要ではないその他のものは、まったく問題なく非表示にする必要があることについて話している.

サーバー側の手法についてはたくさんあります。1 つの良い例は、低解像度の画像を下位のデバイスに送信するアダプティブ イメージですが、クライアント側の手法でもそれを行うことができます。

編集2:

私はそれをほとんど忘れていました

言うまでもなく、onresize は寸法の変更ごとに 1 回起動します。つまり、1000x1000 から 950x1000 にすると、50 回、つまり 50 回の AJAX 呼び出しが発生します。@セバスチャン・ルノー

于 2013-05-23T15:31:42.517 に答える
0

低解像度で列を削除/非表示にする必要はありません。トリックは、低解像度で互いに下に積み重ねてから、高解像度でそれらを列に並べることです。例えば：

<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>

.one, .two, .three {
blah blah blah, whatever needs to be here.
}

次に CSS を追加します。

@media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}
于 2013-05-23T17:05:33.850 に答える
0

http://css-tricks.com/make-client-side-data-available-server-side/

この記事では、Chris Coyier が、クライアント側のメソッドを使用して画面の現在の幅を確認し、それをサーバー側で使用するために Cookie に保存してから、ページを更新する方法について説明しています。私はこの方法を完全に承認するわけではありませんが、おそらくあなたにとって役立つでしょう.

眉をひそめていますが、JavaScript 機能の検出や UA スニッフィングについても調査することをお勧めします。

于 2013-05-23T15:43:55.397 に答える