レスポンシブ Web ページを作成しています。幅ごとに異なるレイアウトがあります。1 つは、幅が 816 ピクセルを超えるデバイス用です。2 つ目は 640 から 816 の間です。最小のものは幅が 640 ピクセル未満のデバイス用です。
PC (Firefox、Chrome、ブラウザのいずれか) でブラウザ ウィンドウをこれらの幅のいずれかに設定すると、正しくスケーリングされ、正しいレイアウトが表示されます。Android タブレット (Asus Transformer Prime) または iPad で表示すると、正しく表示されます (横向きモードでは最大のレイアウト、縦向きモードでは中間サイズ)。
iPhone 5 で表示すると、常に最小のものが表示されます。ランドスケープでは、中くらいの大きさに見えるはずですよね？
どの Android フォンでも、最小のレイアウトを示す縦向きで正しく表示されます。デバイスを横向きにすると、2 番目に大きいものが表示されず、ナビゲーションが正しく表示されません (コンテンツと重なってしまいます)。
私のメディアクエリは次のとおりです
@media all and (min-width: 640px) and (max-width: 816px) { ...
@media all and (max-width: 640px) { ...
大きなレイアウト用の CSS は、これら 2 つの直前に定義されています。
何が問題なのですか？デバイスの半分はページを正しく表示しますが、残りの半分は正しく表示しません。