問題タブ [adaptive-design]

私はアダプティブ アプローチとリアクティブ アプローチの使用について調査しており、その過程で、メディア クエリ、CSS 幅、画面幅、ウィンドウ幅、ドキュメント幅などに関するすべての議論を読んでいます。これらすべてのパラメーターを 1 か所にまとめて対処し、適応サイトまたはレスポンシブ サイトを構築する際に考えられる相互関係を調査します。

上記のコンテキスト全体の中で他の場所では完全に説明されていない私の質問のいくつかを次に示します。私は何らかの結論に達しており、その結論が間違っている場合は明確にしたいと考えています。プロトタイプを実装しましたが、多くのアプローチを使用してうまく動作するようです。アダプティブ サイトまたはリアクティブ サイトを実装するためのベスト プラクティスを知りたいです。

予測：

a. さまざまなデスクトップとデバイスを使用しているが、最新のブラウザーを使用している幅広いユーザー。

b. 純粋な CSS よりも優先される JS ベースのソリューション。

c. 画面表示のみに焦点を当てています。

研究 (実際には、それほど多くはありません!):

メディア クエリ API を単純化すると思われるほとんどのプラグインは、実際には上記の API のみを中心としています (例: enquire.js )。はい、メタタグでピクセル倍率を指定する以外に使用されているのを見たことがないデバイス幅があります。メディアクエリまたは古いアプローチで取得された上記の幅パラメーターの一部が一致しない理由を疑問視する投稿が多数あります。これがそのような投稿の1つです。という事は承知しています。

さて、私の質問は次のとおりです。

1. このすべてのメディア クエリ フープラと、アダプティブ/レスポンシブ サイトで書かれた何千もの記事で、私たちが関心を持っているのは、現在のブラウザー幅とブラウザー幅の変化への応答に基づいてコンテンツを提供することだけですか? 縦長/横長でさえ、実際には幅の問題です。
2. 実際のデバイス検出はメディア クエリの対象ではなく、アダプティブ/リアクティブ サイトの開発には本当に必要ないというのは正しいですか? メディア クエリ (画面用) の唯一の目的は、ブラウザーの幅をバケットまたはブレークポイントに区分化することです (たとえば、breakpoint.jsを参照)。
3. レスポンシブ/アダプティブ サイトを幅広いユーザー向けに開発する場合、 deviceAtlasなどのデバイス検出サービスを使用する価値はありますか?
4. $(window).width を取得するだけではなく、メディア クエリ API を使用することで得られる本当の利点は何ですか? より広いブラウザのサポートですか？標準的なアプローチ？その他の利点は？あなたが取るアプローチは重要ではありませんか？
5. ほとんどのアダプティブ/レスポンシブ サイトは、ユーザーが使用する実際の基盤となる物理デバイスをまったく知らず、ユーザー エージェント情報とここで説明する幅のみに依存していますか?

シンプルなアダプティブ html+css レイアウトを作成しました。その意味は、ページ ブロックのコンテンツに関係なく、コンテンツを含むメイン ブロックの内側、下部が常に「くぎ付け」されているということです (コンテンツが空である可能性があります)。css flex でのデザインを実現しました。Firefox、IE でコンテンツブロックが空の場合、フッターが正しく表示されます (ブラウザ ウィンドウの下部に貼り付けられます)。しかし、Chrome または Opera で開くと、ヘッダー ブロックの高さについて、フッターがブラウザー ウィンドウから下にスライドします (ブラウザー ウィンドウの下部にはくっつきません)。

原因がわかりません。Chrome と Opera ブラウザの何が問題なのか教えてください。

ps絶対位置は使用しないでください。これが FLEX テクノロジーを使用する理由です。

pps サンプル コード (「フル ページ」スニペットを使用してください!):

ppps Firefox (正しい) と Chrome (正しくない) のスクリーンショットを以下に示します。

Firefox: Mozilla Firefox - スクリーンショット

Chrome: Google Chrome - スクリーンショット

マイページ構成は以下の通りです。

dateTBテキストブロックのセッターをVisualState.Settersに追加して相対パネルの左側に移動すると、次のエラーが表示されます。

アニメーションが「dateTB」という名前のオブジェクトを変更しようとしていますが、そのようなオブジェクトがページに見つかりません。

セッターを追加するコードは次のとおりです。

このページ構造で Visual State Manager を介してこのテキストブロックを制御する方法はありますか?

アダプティブデザインで画像の特定の場所にボタンを付けるにはどうすればよいですか? 特定の場所に「サインイン」ボタンを付けるにはどうすればよいですか? ウィンドウのサイズを変更する場合 ボタンの位置を変更する

JSFiddle

これがリンクhttp://testmvs.zzz.com.ua/です。これは私のテスト ドメインです。私はこの Web ページを書き、(フレームワークなしで) 自分で適応させました。ブラウザーでは必要に見えますが、iPhone でこの Web ページを見ていると間違っているように見えます。 meta name="viewport" content=" と書きましたwidth=device-width, initial-scale=1", デスクトップ版と見た目が違うのはなぜですか?