問題タブ [responsive-design]

クライアントの 1 人のためにモバイル サイトを構築する計画の初期段階にあります。このモバイル サイトは、既に構築済みのメイン サイトに追加されます。コンテンツはメイン サイトの小さなサブセクションであり、サイトを使用すると予想される主な対象者をターゲットにすることが決定されました。

いくつかのサンプル モバイル サイトを調べたところ、URL に WAP が含まれているサイトの多くは、実際には単純化された HTML ファイルであることがわかりました。 http://wap.mlb.comは実際には WAP 対応ではなく、単純な HTML です。

私の質問は、WAP は過去の考えですか? スマートフォンと iPhone がサイトをそのまま表示できるようになったので、WML と WAP について心配する必要がありますか?それとも、簡素化された HTML バージョンで十分でしょうか?

また、ブログやチュートリアルをお勧めするか、モバイル デバイスを確認する最善の方法について以下に回答していただけますか? プログラマーは、ユーザー エージェントをモバイル サイトにリダイレクトするために、ユーザー エージェントの各バリエーションを知る必要がありますか?

最後に、iPhone/Touch Safari ブラウザ用のモバイル サイトをプログラムしますか、それともサイトをそのままにしておきますか?

900 x 600 の固定背景画像を使用してサイトをデザインしました。コンピューターでは問題なく表示されます。PDA デバイスではどのように表示されますか? PDA 用に個別に設計する必要がありますか?

自分のサイトが携帯電話から効率的に閲覧できるかどうかを確認するにはどうすればよいですか?

私は何をすべきか？

divウィンドウの幅の変化に応じて幅/高さを変更できるを作成したいと思います。

アスペクト比を維持しながら、幅に応じて高さを変更できるCSS3ルールはありますか？

JavaScriptを介してこれを実行できることはわかっていますが、CSSのみを使用することをお勧めします。

私はサイトを作成していますが、デバイス (PC、iPad、iPhone) ごとに異なる CSS を使用する必要があります。ユーザーがどのデバイスを使用して CSS を選択したかを知ることは可能ですか?

ページの左上隅にユーザー名とパスワードのフィールドを含むログイン用の html ページを作成しました。このページが Android エミュレータ ブラウザで表示されたときに、元のページの左上部分だけがページ全体に表示されるようにします。どうすればいいですか？ウェブページをモバイル ブラウザに対応させる方法。

幅と同じ高さ（比率1：1）を設定することはできますか？

例

CSS

IE8 は次の CSS メディア クエリをサポートしていませんか。

そうでない場合、別の書き方は何ですか? Firefoxでも同じことがうまくいきます。

以下のコードに問題はありますか?

「レスポンシブ デザイン」のコンセプトを中心にサイトを開発していますが、Facebook のソーシャル プラグインは幅が固定されており、サイズを変更するとレイアウトが「壊れて」しまいます。

メディア クエリを使用して、プラグインを低解像度ブラウザー (モバイルなど) で非表示にするように設定しました。ただし、デスクトップ ブラウザーでは、ブラウザー ウィンドウのサイズを小さく変更しても、プラグインを非表示にするほど小さくないと、プラグインがレイアウトからはみ出してしまいます。

Facebook ソーシャル プラグインの流動的な幅を設定する方法はありますか?

パーセンテージ幅の html 要素には、その内部の静的コンテンツの最小幅が必要です

こんにちは、流動的/レスポンシブなレイアウトを作成しようとしています。パーセンテージ幅を持つ html 要素に、その内部コンテンツの最小幅を強制する方法はありますか? つまり、内部コンテンツに 200px のような静的な幅がある場合はどうなりますか?

例を次に示します: http://www.nathanielkessler.com/div/csshelp.html

IE9 で Quirks モードに設定し、ウィンドウのサイズを変更すると、希望どおりに動作します。(画面のサイズを内側に変更すると、右側の 2 番目の div が左側の最初の div の下に表示されることに注意してください)。

ドキュメントを IE9 標準モードに戻し、サイズを内側に変更すると、外側の赤い枠で囲まれた div が内側のコンテンツ (黄色のボックス) を尊重していないことがわかります。私はその境界を超えて縮小し続けています。
quirks モードのように動作させる方法はありますか? (JavaScript なし)

Webサイトの応答性を高めるために、要素を流動的に定義する方法を学ぼうとしています。今日、ようやく修正した状況に出くわしましたが、なぜ修正が機能したのかわかりません。

サイト（NDA）にリンクできませんが、問題の要素を含むサンプルページをいくつか掲載しました。

間違った例：http ：//cruxwire.com/wrong.html正しい例：http ：//cruxwire.com/right.html

私が持っているのは、3つのdivが左に浮かんでいることです。それらに（パーセンテージとして）パディングを追加しようとしており、target / context = resultを使用してから、* 100（パーセンテージであるため）を使用しています。

EthanMarcotteによるレスポンシブWebデザインの私のコピーは、「要素に柔軟なパディングを設定する場合、コンテキストは要素自体の幅です」と述べています。 私はdivに20％の幅を与えました。親要素が945pxであるため、各divのピクセル幅は189pxです。20pxのパディングを追加したかったので、20/189=0.1058201058201058。10.58201058201058％の各divにパディングを追加しました。

これにより、各divに20pxではなく100pxのパディングが与えられます。最終的に、パディングはdiv自体ではなく、親要素の幅に基づいて計算されていることに気付きました。

私の解決策は、既存の各divの周りに追加のdivを配置して、一方に幅を適用し、もう一方にパディングを適用できるようにすることでした。これで問題は解決しました。

パディングが、それ自体の要素ではなく、その親要素を基準にして計算されるのはなぜですか？

追加のdivを追加せずにこれを行うにはどうすればよいですか？

この投稿にリンクされているページでコードを確認できます。以下にもコードを追加しました。

間違い：

右：