レスポンシブWebデザイン-モバイルデバイスを回転させるとどうなりますか？
現在、モバイルでWebページを表示するための標準的な動作は次のとおりです。
- デバイスの幅が小さく、ページ全体の幅が表示に収まる必要があるため、縦向きで表示するとテキストは小さくなります。
- 横向きに表示すると、幅が広くなり、テキストが大きく読みやすくなるため、ビューが「ズームイン」しますが、結果として画面上のコンテンツが少なくなります。
したがって、これはジレンマをもたらします。レスポンシブなウェブサイトを作成するとき、デバイスのローテーションで何が起こるべきですか？ （最初のページの読み込み時ではなく、サイトが読み込まれ、画面を回転させることにした場合に何が起こるかについて言及しています）
縦向きから横向きに回転させると、次のことができます。
a）デバイスの幅を再検出し、新しい寸法に従ってコンテンツをマッピングします（これにより、縦向きを表示するときと同じフォント/画像サイズを保持します）。
b）同じ寸法を維持し、回転時にコンテンツをウィンドウに合わせるだけです（コンテンツを拡大して、視聴者が読みやすいようにコンテンツを拡大します）縦向きのテキストが小さすぎます）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
モバイルで表示される従来のWebページでは、テキストをピンチズームできるオプションがあるため、テキストが小さすぎる場合はズームインできることに注意してください。レスポンシブサイトの場合、サイトはオプションではありません。拡大表示するものがないので、寸法にフィットします。
（3番目のオプションもあると思います-レスポンシブフォントを使用して、フォントサイズが画面の幅に応じて変化するようにします。しかし、それはおそらく別の質問です）。
遅い答えを追加しましょう：コンテンツが読み込まれた後、ローテーションでブレークポイントをトリガーさせないでください。
ユーザーが誤ってデバイスを回転させた場合、最も迅速なタスクは、自分の向きを変えて、回転時に表示または読んでいたコンテンツを見つけることです。しかし、ブレークポイントトリガーにより、ユーザーは突然認識できないインターフェイス（何かが発生したのかと不思議に思うことになります）と、初期位置を再確認するために使用するアンカーを壊す追加のコンテンツが表示されます。さらに悪いことに、ブレークポイントが削除された場合、ユーザーが再検索したいコンテンツが完全に削除されている可能性があります。これが起こったことを発見することは、非常に費用のかかる操作です。
しかし、ユーザーが意図的にデバイスを回転させたらどうなるでしょうか。まあ、同じこと。ユーザーが縦向きから横向きに移動してコンテンツを詳しく見たい場合（この場合、コンテンツを追加すると効果がキャンセルされるだけです）、または同じコンテンツをより快適に表示したい場合（つまり、人間工学上の理由から回転）。
tl; dr-ページのロード後にコンテンツを変更しないでください。
個人的には、この2つが混在するサイトのサポーターです。
- フォントは横向きと縦向きの両方で同じサイズを維持する必要があります。現在の画面幅に応じて、単に異なるように配分する必要があります。 Aのモックアップでも示したように
テキストのスケーリングも "-okの概念に屈するようなものだと思います。ポートレートモードではテキストが非常に小さいことがわかります。しかし、スマートフォンをひっくり返すと、読みやすいはずです。 ！ "。それがあなたのスタンスなら、ポートレートモードでテキストのサイズを大きくしてください！ポートレートモードでテキストを小さくすることの唯一の真の利点は、ユーザーが同時に多くのページを表示できることです。しかし、これは、設計時に発見可能性の側面を徹底的に検討することでも実現できます。
- オプションBで説明されているように、画像はスケーラブルである場合がありますが、そうである必要があります。
画面サイズに関係なくレイアウトに完全に収まる1つの画像サイズを用意するのは難しいので、それを不可能にしてください。大きな画面では小さな画像が見苦しく見え、小さな画面では大きな画像が邪魔になります。さらに、各画面サイズの間隔で発生するしきい値を見つけた場合は、各画面の幅に完全に適合するレイアウトを1つ作成できます。
フードセンス を見て、幅に応じて5つの異なるレイアウトで実際にうまく機能し、見栄えがよいレスポンシブWebサイトを持っている人をお勧めします。おもしろい機能は、狭いレイアウトにぴったり合うため、小さいディスプレイでいくつかの画像を大きくできることです。
これはデリケートであり、設計者が適切に判断する必要があります。正しいことも間違ったこともありませんし、（まだ）信頼できる慣習もありません。しかし、ページを拡大するだけでズームインするなど、いくつかの考慮すべき点があります。ズームしたい場合は、テキストをスナップインして、読みやすい形式で表示できます（横向きと縦向きの両方）。そのため、そのオプションはオフです。
代わりに、縦向きよりも横向きで表示するページ（またはアプリ）が好きです。画像、関連リンク、または「事実ボックス」である可能性のあるWebページ。ネイティブアプリケーションでは、より優れた制御が可能であり、Windows Phone 7計算機など、より多くのオプションを提供できます。
これに関する問題は、横向きにするとさらに多くのことを確認できるかどうかがユーザーにわからないことです。これはユーザーエクスペリエンスにとっては悪いことですが、それを知るととても楽しいです。私の答えは、簡単に言うと、横になっているときにビューに何かを追加し、ズームしないことです。
デバイス指向の設計にはさまざまなアプローチがあり、選択できるいくつかの設計パターンの1つを実装できます。最初に頭に浮かぶのはfluid設計です。これは（単純に言えば）要素を再構成して見やすくします。画面の幅が狭くなると、それほど重要ではない要素が非表示になり、その逆も同様です。
次はextendedデザインで、既存の画面に垂直方向の要素である場合とナビゲーションでない場合があります。元の画面はそのままで、デバイスを水平に反転すると、拡張要素が表示されます。
相補的なデザインもあり、垂直から水平方向への情報を追加します。これは、垂直方向のデータのグリッドビューで、水平方向のグラフになります。
ハゲが必要な場合は、continuous設計を使用することもできます。これは、まったく異なる画面を異なる方向で表示します。現在、ユーザーがそのデザインにどのように反応するかは不明ですが、高齢者のユーザーがこのデザインに苦労する可能性があります。
デバイスの向きの設計は新しいものではありません。たとえば、横向きモードに回転すると、スマートフォンは大きな仮想キーボードを開き、タブレットのメールアプリケーションはマスター/詳細インターフェースに切り替わります。ただし、デバイスの向きの設計は、主にデフォルトの向きに固執するユーザーが見逃しがちであるため、メインインターフェイスのセカンダリとして広く扱われています。シンプルな視覚的な手がかりをインターフェースに追加することにより、UXプロフェッショナルは、デバイスの向きを使用して製品を強化し、最終的にはより魅力的でユーザーフレンドリーなエクスペリエンスを提供することを可能にします。
幅の範囲内にうまく収まるようにコンテンツを設計しますが、特定のビューポートの幅を想定しないでください。コンテンツは、現在人気のあるデバイスサイズ（常に変化している）ではなく、再配置と調整のブレークポイントを決定する必要があります。
一部のコンテンツ/アプリケーションでは、レイアウト構造が変更され（上記の計算機の例のように要素が追加/削除され）、他のコンテンツ/アプリケーション（テキスト指向のものなど）では、幅が変化してもレイアウト構造は変更されません。
私の経験では、テキスト指向のサイトに関しては、ほとんどの場合、狭いビューポートのヘッダー（h1など）のフォントサイズを小さくする必要がありますが、メインコンテンツのフォントを同じサイズに保ち、横の余白を絞ります。
しかし、それはすべて内容に依存します。
一貫性を保つために、縦向きで横向きに回転したデバイスのページが、最初から横向きで開始した場合と同じであることを確認します。ユーザーが2つの異なる機会にサイトにアクセスし、ユーザーがどの方向から始めたのかによってサイトが異なる場合、ユーザーは混乱することになります。
その時点で、自分の「現在の」フォームファクタが何であれ、最高のエクスペリエンスが必要だと主張します。左側のナビゲーションは、縦向きでは非常に貧弱ですが、横向きでは非常に歓迎されます。
問題の根本を考えます。大きなテキストの方が読みやすい場合は、両方のビューのテキストを同じ大きさで読みやすいサイズにします。画面のサイズ、ピクセル密度、ユーザーの目からの距離は、回転しても変化せず、向きだけが変わります。したがって、レイアウトは変わる可能性がありますが、フォントサイズほど細かいものはありません。ユーザーがどちらのビューでもアクセスできるピンチズームなど、フォントサイズに影響を与える直接的な方法は他にもあります。
それで、2017年1月です。これは2012年に良い質問でしたが、私たちの経験が今、私たちの意見を変えたのではないかと思います。応答性の動きは主に以下のルールに従うことを好むようです
利用可能なスペースを使用する
方向変更時にレイアウトを再編成することにより。これは受け入れられ、期待される実践となったようです。
OTOH、自然な視力低下を伴う50年以上の「老人」として話すと、一部のWebサイトでピンチズームの欠如が苦痛であり、レイアウトを同じに保つことを提案する2012年の承認された回答に同情がありますただし、フォントサイズを大きくするだけです。
とにかく私自身の考えについては十分です-世界が進んでこの質問に新しい答えが必要であることに他の人は同意しますか？