CSS応答デザイン - 縦型表示

Question

を検出し、私はそれがこのように、画面の大きさに応じたスタイルシートを適応させるために、純粋なCSSで可能であることを知っている：

@media (max-width: 959px) { 
    /* styles for smallest viewport widths */ 
} 

@media (min-width: 600px) and (max-width: 959px) { 
    /* styles for mid-tier viewport widths */ 
} 

@media (min-width: 960px) { 
    /* original CSS styles */ 
} 

^（source）

はそれが純粋付きです風景や肖像画の表示を確認するにはが可能ですか？次の構文を使用して

Answer 1

はい、：

@media all and (orientation: landscape) {} 

は、より多くの情報のためw3 specsを参照してください。 w3から

Answer 2

：

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

Answer 3

あなたはorientationを使用することができます。

@media all and (max-width: 959px) and (orientation : portrait) { 
    /* Styles */ 
} 

Answer 4

すべての答えが間違っています。キーボードが表示されている場合、Androidはポートレートからランドスケープにスワップします。

異なるキーボードでは、垂直方向のスペースを増やすためにテストが必要です。スウィフトキーボードはより多くの垂直スペースを占有しますので、@media画面や（min-aspect-ratio：13/9）{/ *風景スタイル* /}のようなソリューションを使用することはできません。

唯一の解決策は、javascriptを使用することです。

新しいAndroidデバイスでは、新しいwindow.screen.orientation APIをテストして使用できます。

iOSでは、うまく動作するwindow.orientationを使用できます。つまり、Math.abs（window.orientation）=== 90は風景です

そして、代替として、window.screen.width> window.screen.heightを使用して、新しいウィンドウをサポートしない本当に古いAndroidデバイスをカバーします.screen.orientation api

次に、resize/orientationchangeイベントでクラスを追加/削除するだけです。