IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / CSSでデバイスの縦長横長を判別 @media(orientation)

CSSでデバイスの縦長横長を判別 @media(orientation)

2019/12/27 CSS

デバイスの表示領域が縦長か横長かで CSS を変更したいと思ったことはありませんか?

  • CSS メディア特性 orientation
  • 具体例

CSS メディア特性 orientation

メディアクエリのメディア特性に orientation というものがあることを知りませんでした(涙)。

これまでは javascript で

    if (window.innerHeight > window.innerWidth) {
        document.body.classList.remove('landscape');
        document.body.classList.add('portrait');
    } else {
        document.body.classList.remove('portrait');
        document.body.classList.add('landscape');
    }

などと、body タグにクラスを付加して切り分けていましたが、この orientation を使えばメディアクエリで振り分けられます。

orientation – CSS: カスケーディングスタイルシート | MDN

構文

orientation 特性は以下の一覧のうち一つのキーワード値で指定します。

キーワード値

portrait
ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。
landscape
ビューポートは横長です。つまり、幅が高さよりも大きい状態です。

注意すべきは端末の向きではなく、あくまでもビューポートの幅と高さの比較だということです。

具体例

www.movieimpressions.com

このサイトのトップページで使っています。

.listingNavi {
    display: flex;
    flex-direction: column;
}
@media (orientation: landscape){
    .listingNavi {
        flex-direction: row;
    }
}

クラス名の listingNavi は3つの画像の親要素に設定されているクラスです。

たとえば、@media (min-width: 768px) {} ですと、スマホを横向きにしても画像が縦並びのままになりますが、@media (orientation: landscape){} を使いますと横並びに変わります。

これは便利です!

モバイル ユーザビリティ検査、おかしくないか!?
2020年はモバイル ユーザビリティエラー対策で始まる
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com