Written by Kasumi

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

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

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

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

スマホが横向きの場合

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

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

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

orientationの値にlandscapeを指定。

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

スマホが縦向きの場合

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

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

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

orientationの値にportraitを指定。

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

まとめ

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

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

目次

関連記事

HTMLCSS

CSSでテキストにグラデーションをかける方法(便利なジェネレーターも紹介)

2022.07.03
3695
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
1183
HTMLCSS

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
10679
HTMLCSS プログラミング

【簡単CSS】横スクロールできない問題を解決する方法

2022.03.16
6553