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 jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
1198
HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
1425
HTMLCSS プログラミング

横スライドメニューをhtml・CSSのみで実装【JS不要簡単】

2020.04.12
881
HTMLCSS プログラミング

【CSS】input要素のplaceholderの文字だけサイズを変更する方法

2022.01.10
3525