私はアダプティブ アプローチとリアクティブ アプローチの使用について調査しており、その過程で、メディア クエリ、CSS 幅、画面幅、ウィンドウ幅、ドキュメント幅などに関するすべての議論を読んでいます。これらすべてのパラメーターを 1 か所にまとめて対処し、適応サイトまたはレスポンシブ サイトを構築する際に考えられる相互関係を調査します。
上記のコンテキスト全体の中で他の場所では完全に説明されていない私の質問のいくつかを次に示します。私は何らかの結論に達しており、その結論が間違っている場合は明確にしたいと考えています。プロトタイプを実装しましたが、多くのアプローチを使用してうまく動作するようです。アダプティブ サイトまたはリアクティブ サイトを実装するためのベスト プラクティスを知りたいです。
予測：
a. さまざまなデスクトップとデバイスを使用しているが、最新のブラウザーを使用している幅広いユーザー。
b. 純粋な CSS よりも優先される JS ベースのソリューション。
c. 画面表示のみに焦点を当てています。
研究 (実際には、それほど多くはありません!):
//The traditional way to get widths (using Jquery):
windowWidth = $(window).width(); // returns width of browser viewport
documentWidth = $(document).width(); // returns width of HTML document
screenWidth = screen.width; // screen width - Physical screen width
//This is post CSS3 approach to handling width
mql = window.matchMedia('screen and (min-width:500px) and (max-width:800px)');
//Check if there was a match:
if (mql.matches) { //serve your customized page }
//And then there is the listener that can be added to the object returned
//by the above query, as in for state changes when the browser is resized.
mql.addListener(someListener); //Fired only if the match state changes
メディア クエリ API を単純化すると思われるほとんどのプラグインは、実際には上記の API のみを中心としています (例: enquire.js )。はい、メタタグでピクセル倍率を指定する以外に使用されているのを見たことがないデバイス幅があります。メディアクエリまたは古いアプローチで取得された上記の幅パラメーターの一部が一致しない理由を疑問視する投稿が多数あります。これがそのような投稿の1つです。という事は承知しています。
さて、私の質問は次のとおりです。
- このすべてのメディア クエリ フープラと、アダプティブ/レスポンシブ サイトで書かれた何千もの記事で、私たちが関心を持っているのは、現在のブラウザー幅とブラウザー幅の変化への応答に基づいてコンテンツを提供することだけですか? 縦長/横長でさえ、実際には幅の問題です。
- 実際のデバイス検出はメディア クエリの対象ではなく、アダプティブ/リアクティブ サイトの開発には本当に必要ないというのは正しいですか? メディア クエリ (画面用) の唯一の目的は、ブラウザーの幅をバケットまたはブレークポイントに区分化することです (たとえば、breakpoint.jsを参照)。
- レスポンシブ/アダプティブ サイトを幅広いユーザー向けに開発する場合、 deviceAtlasなどのデバイス検出サービスを使用する価値はありますか?
- $(window).width を取得するだけではなく、メディア クエリ API を使用することで得られる本当の利点は何ですか? より広いブラウザのサポートですか？標準的なアプローチ？その他の利点は？あなたが取るアプローチは重要ではありませんか？
- ほとんどのアダプティブ/レスポンシブ サイトは、ユーザーが使用する実際の基盤となる物理デバイスをまったく知らず、ユーザー エージェント情報とここで説明する幅のみに依存していますか?