問題タブ [responsive-design]

CSS メディア クエリと同じ方法で、XAML と C# を使用して、Silverlight でレスポンシブ レイアウトを作成したいと考えています。最善のアプローチについてアドバイスを提供できる同様のことをした経験のある人はいますか? CSS/HTML を使用したレスポンシブ デザインの例: http://mediaqueri.es/

理想的には、3 ～ 4 個の個別の XAML スタイル ファイルが必要だと思います。1 つは基本スタイルのセットで、次にスタイルを調整する必要がある (まだ決定されていない) 画面幅/しきい値ごとに 1 つです。そして、ブラウザ ウィンドウの幅が 480px 未満の場合は 480styles.xaml を使用し、ブラウザの幅が 481px から 768px の場合は 768styles.xaml を使用するなど、いくつかのコードが必要になります。

私は開発者ではなく UI デザイナーであるため、かなりコードに詳しくないため、説明が不十分であるか、リモートでさえ不可能である場合はお詫び申し上げます。あなたが提供できる助けを前もってありがとう！

私はこのスレッドを読みました: ブラウザーがモバイル デバイスであるかどうかを知る方法について、モバイル デバイスを検出する最も簡単な方法。一般的なコードは次のとおりです。

問題は、タブレット（iPad＆xoom）を扱いたいということです。

まだテストした isIpad() 関数があることがわかりましたが、それでもタブレットと携帯電話の違いは解決しません。

何か案が？

ありがとう、アロン

サイズに関係なく、すべてのタブレットと電話をターゲットにしたいとしましょう。このためのメディアクエリはありますか? サイズを指定せずにこれを行うことは可能ですか？それとも、サイズを使用してモバイル デバイスをターゲットにする唯一の方法であり、デスクトップではありませんか?

私はウェブサイトを開発していて、ユーザーにモバイルとデスクトップに優しい体験を提供したいと思っています。

ベースのhtml5/css / js開発から来て、私は十分なcssトリック、モバイルファーストテクニック、リキッドレイアウト、メディアクエリを知っていますが、ソリューションをさらに最適化し、現在作業を開始していることを考慮に入れています。 net / mvc（かみそりを含む）新しいオプションを探しています。

私はデバイス検出技術（現在http://51degrees.codeplex.com/を支持しています）について読みました、そして今私はすべてのユーザーのために私のウェブサイトを最適化するために必要なオプションを理解しようとしています。

モバイルユーザーに大きなバージョンの画像や不要なスクリプト/スタイルシート/背景画像などを読み込ませたくないし、「モバイルファースト」アプローチのようにすべてのモバイルスタイルシートを上書きしたくない。

作業を開始したばかり/MVCパターンの操作方法を学習しているので、質問しています：MVCパターン/開発を使用して、1つの結合されたWebサイト（デスクトップとモバイルバージョンではない）を構築し、JavaScript、画像URLを含めることは可能ですか？ 、「if else」を使用するユーザークライアント/デバイスに基づくスタイルシートなど、およびユーザーがオンデマンドでフルバージョンに切り替えることができるオプション。

レスポンシブレイアウトをデザインしていて、次のCSSを使用して、背景の上に汚れたpngオーバーレイを配置しました。

このように、画像はページ幅に関係なく常に中央に配置されます。#bg私の問題は、ブラウザウィンドウがオーバーレイの背景画像よりも小さい幅に縮小されたときに発生します。水平スクロールバーが表示され、背景が右端まで広がります（特にブラウザが非常に小さい場合）。

あなたはここでこれのデモを見ることができます：http：//pixelcakecreative.com/cimlife/response2/

水平スクロールバーが表示されているので、ブラウザウィンドウを縮小して、画像の全幅を保持しないようにします。何か案は？

人々がズームインするのを妨げているため、人々がmaximum-scale=1.0内で使用していることについて、ウェブコミュニティからいくつかの不満を聞いたことがあります.meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;

私がこれを使用する理由は、モバイル デバイスが横向きになるとすぐに再調整され、レイアウトに影響を与えるように見えるからです。

私の最初の質問は次のとおりです。最大スケールは本当に悪いのでしょうか?

次に、iPhone またはスマートフォンがコンテンツを自動的に調整しないようにする代替手段は何ですか?

ありがとう

最近、レスポンシブバージョンのサイトを立ち上げましたが、デスクトップビューとモバイルビューの両方ですべてを1行に収めると、各1行が表示されるため、1行のテキストを含むパーセンテージ幅の分割は非常に見栄えが悪いことがわかりました。テキストが長すぎるか短すぎる。

私のマークアップは、（長いアンカーテキストを含む）単一の順序付けられていないリンクのリストです-含まれている分割の幅に従ってアンカーテキストを切り捨てる提案はありますか？

レスポンシブ レイアウトを設計していますが、何らかの理由でブラウザーのサイズを 767px 未満 (またはモバイル デバイス) に変更すると、水平スクロールバーが表示されます。何が原因なのか、それを取り除く方法を理解できないようです。コンテンツの右側にあるはずのない余分なスペースがあります。

ここでデモを見ることができます: http://pixelcakecreative.com/cimlife/responsive2/

修正はありますか？

パディングと固定幅のサイドバーを備えた流動的なコンテンツ領域があります。画像をコンテナと同じfloat: right負の値にして、フローティング画像をサイドバーに隣接させたいと思っています。margin-rightpadding

コードは千の言葉に値する...

問題を示す縮小テスト ケースを次に示します: http://jsfiddle.net/alexdunae/34ZDw/3/ -- プレビュー ペインを縮小または拡大して確認します。

私の負のマージンの計算がどこかでずれているようです。どんな助けでも大歓迎です。

主題が広すぎるためにこの質問が閉じられないことを願っていますが、レスポンシブ/アダプティブWebデザイン、つまりすべてのブラウザ、すべてのデバイスに対応する1つのWebサイトについて疑問に思っていました。

構造とレイアウトに関して、そのようなサイトを実装するための最良の方法は何ですか？

モバイルウェブサイトは今のところ大きなものであり、しばらくの間はそうなるので、私はそれを読み込もうとしていますが、ヒントとガイドラインのリストを見つけることができず、そのようなリソースがここSOで利用可能であると考えましたそうすれば、私たち全員が恩恵を受けることができます。

私を惹きつけるもう一つのことは、動的画像スケーリングがどのように行われるかということです。

ピクセルはデバイスごとに異なるため、私が推測しているレイアウトはおそらくピクセル値ではなくパーセンテージを使用して行われているため、これはすべての中で最も困惑することですが、画像はおそらくすべてのWebサイトを実現するための重要な要素です。

まだ見つけていないウェブ上のチュートリアルへのリンクであっても、人々の意見や回答を読むのを楽しみにしています。