HTTPヘッダーにデバイスの解像度、ピクセル密度などが含まれていないのはなぜですか？

現在、CSSメディアクエリを使用したレスポンシブウェブサイトを開発しています。サーバーがビューポートごとに異なるHTML / CSSを返すと、はるかに簡単になります。
クライアントがHTMLファイルをリクエストするときにビューポート情報を含めることができないのはなぜだろうと思っていました。この動作は、Accept-Languageヘッダーを使用して正しい言語でWebサイトを返す場合にすでに一般的です。

つまり、Wild Wild Webが機能するように設計されていたわけではありません。

元のデザインは、HTMLがブラウザにドキュメントについてのヒントを与えるだけでした。強調するビット、画像ファイルの取得先。フォントとそのサイズに関する決定は、ブラウザとローカルの構成設定の仕事でした。

はい、私は世界が進んだことを知っています、そして今、ウェブデザイナーは私たちの目が見ることができるすべてのピクセルを制御することを期待しています。昔、それはデスクトップテーマの仕事でした。

レスポンシブWebデザインのアイデアを完全に理解していないと思います。クライアントのWebブラウザーに基づいてさまざまなHTML / CSS / JSを提供することはしばらく前からあり、それを実行しているWebサイトがまだあると確信しています-非常に明確な例は、モバイルを提供する昔ながらの方法ですに優しいテーマのウェブサイト。

私の意見では、足りないのは、ユーザーがビューポートをポートレートからランドスケープに変更した場合、ページを更新しない限り、応答が得られないということです。Webブラウザウィンドウのサイズを変更したり、デフォルトのズームを変更したりする場合も、同じ操作が必要です。また、ページ内の要素が他の要素に応答する場合もあります。たとえば、右側のサイドバーを非表示にすると、メインコンテンツが変更に応答します。あなたがページをリフレッシュしない限り、これらはあなたの方法で再び可能ではありません。

また、HTTPリクエストはWebページ全体を処理するように設計されているだけではありません。多くの場合、プレーンポートのデータ、ファイル、画像などを送信/受信するリクエストを送信していますが、それらはビューポートのメタ情報を引き継ぐ必要がなく、インターネットのようなスケールでのオーバーヘッドは多くなると思います。

あなたは必ず、あなたは応答性のデザインをやっていますか？レスポンシブデザインは、技術的には流動的なデザインとメディアクエリの組み合わせです。

流体の設計により、レイアウトの方法が賢明であれば、ビューポートの問題の90％が解決されます。メディアクエリは、現在のディメンションに基づいてグリッドの特性を変更することで、残りの10％を取得します。

流体のみを実行しようとしている場合（あらゆる場所でのパーセンテージ、すべての相対的なサイズ設定、ピクセルで指定されていないものなど）、ビューポートのサイズが劇的に異なる場合（デスクトップの横向きビューと。モバイルポートレートビュー）。2048pxから640pxにすると、一部がうまく適合しません。メディアクエリのみを実行しようとすると、最終的には数十および数十のメディアクエリが中断し、その場合は基本的にCSSクラスを細かく管理します。どちらのアプローチもRWDには適切ではありません。すべてを取得するには、2つを組み合わせる必要があります。

私のアドバイス：デスクトップの横向き、iPadの縦向きと横向き、iPhoneの縦向きと横向きなど、3つまたは4つの異なる「公称解像度と向き」を作成し、それらを作業のワイヤフレームとして扱います。次に、これらの休憩のメディアクエリを設定します。次に、流動的なレイアウトを使用してそれを達成するために、これらのいくつかの中断に固執するように本当に一生懸命作業します-おそらく何らかのCSSグリッドを使用します（事前に作成されたものもあれば、独自に作成することもできます）。

コンテンツを取得する動的なWebサイトがある場合、次のようなコードでうまくいきます（ES6の場合）。

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

注：「資格情報」はセッションCookie用です

次に、たとえば（PHPで）サーバー側でこれらのヘッダーを読み取ることができます。

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

これは、ユーザーがページをリロードせずにブラウザーウィンドウのサイズを変更できるという単純な理由で機能しません。

レスポンシブデザインとは、ビューポートのサイズやその他の要因に応じてレイアウトが動的に変化することを意味します。したがって、リクエスト時のビューポートサイズに基づいてサーバー側でデザインが修正されている場合、ユーザーがウィンドウのサイズを変更しても反応しません。これが、クライアント側でメディアクエリが評価される理由です。