スマホを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法

スマホのデバイスを横向き・縦向きに切り替えた時だけ任意のCSSを実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

スマホが横向きの場合

//横向きの場合
@media (orientation: landscape) {
  .mv {
    height: auto;
  }
}

スマホが横向きの時だけCSSを当てるコード例です。

メディアクリエリのorientationを使います。

orientationの値にlandscapeを指定。

横向きの時だけメディアクエリ内で設定したプロパティが付与されます。

//縦向きの場合
@media (orientation: portrait) {
  .mv {
    height:100vh;
  }
}

スマホが縦向きの時だけCSSを当てるコード例です。

前章と同じくメディアクリエリのorientationを使います。

orientationの値にportraitを指定。

縦向きの時だけメディアクエリ内で設定したプロパティが付与されます。

スマホのデバイスを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法について紹介しました。

以上で解説を終わります。