CSSメディアクエリを使用してデバイスの向きを検出する方法

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

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

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

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

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

画面の向きを検出するためのCSS：

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

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

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

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

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

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

モバイル向け

@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.

}

デスクトップ

あなたの設計要件に従って楽しんでください...（：

ありがとう、Jitu

私はアスペクト比に行くでしょう、それはより多くの可能性を提供します。

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

向きとアスペクト比はどちらもビューポートの実際のサイズに依存し、デバイスの向き自体には関係ありません。

続きを読む：https : //dev.to/ananyaneogi/useful-css-media-query-features-o7f

JavaScriptではscreen.widthand を使用することをお勧めしますscreen.height。これらの2つの値は、すべての最新のブラウザーで使用できます。アプリの起動時にブラウザが縮小されていても、画面の実際のサイズがわかります。window.innerWidthブラウザが縮小されたときに変化します。これは、モバイルデバイスでは発生しませんが、PCおよびラップトップでは発生します。

モバイルデバイスのポートレートモードとランドスケープモードが切り替わるscreen.widthと、との値がscreen.height変化するため、値を比較することでモードを判別できます。screen.widthが1280pxより大きい場合は、PCまたはラップトップを扱っています。

JavaScriptでイベントリスナーを作成して、2つの値が反転するタイミングを検出できます。集中する縦向きのscreen.width値は、320px（主にiPhone）、360px（他のほとんどの電話）、768px（小さいタブレット）、800px（通常のタブレット）です。