1. ホーム
  2. browser

[解決済み] CSSメディアクエリを使用してデバイスの向きを検出するには?

2022-04-20 06:58:49

質問

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