browser - CSSメディアクエリを使用してデバイスの向きを検出するには?

Question

JavaScript では、以下を使用して方向モードを検出できます。

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

しかし、CSS のみを使用して方向を検出する方法はありますか?

例えば。何かのようなもの：

@media only screen and (width > height) { ... }

Answer 1

画面の向きを検出する CSS:

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

メディア クエリの CSS 定義は、http://www.w3.org/TR/css3-mediaqueries/#orientationにあります。

Answer 2

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

しかし、まだ実験する必要があるようです

Answer 3

より具体的なメディアクエリを書く必要があると思います。1 つのメディア クエリを記述しても、他のビュー (Mob、Tab、Desk) に影響しないようにしてください。そうしないと、問題が発生する可能性があります。ビューとオリエンテーション メディア クエリの両方をカバーする、それぞれのデバイス用の 1 つの基本的なメディア クエリを作成することをお勧めします。両方のメディア オリエンテーション クエリを同時に記述する必要はありません。以下の私の例を参照できます。私の英語の文章があまり良くない場合は申し訳ありません。元：

モバイル用

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

タブレット用

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

デスクトップ

設計要件に従って作成してください...(:

ありがとう、ジトゥ