web-dev-qa-db-ja.com

スマートフォンのポートレート、ランドスケープ、デスクトップのメディアクエリ？

スマートフォンの向きとデスクトップに異なるメディアクエリを設定しようとしています。縦向きと横向きをターゲットにしたいと思います。私はそのような他のすべてのスタックリンクを知っています：

ほとんどのスマートフォンをターゲットとするメディアクエリiPhoneの縦向き、横向き、iPadの縦向きの3つのメディアクエリ

しかし、私はまだ問題があり、私のランドスケープは機能していません、これは私が使用しているコードです：

Desktop css first
   -- csss for desk --

Portrait:

   @media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
   body {
      padding: 0 !important;
   }
   .infoShowWrapper {
      width: 268px;
  }
   .heroImage {
      margin-top: 0;
      height: 200px;
      width: 100%;
      background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
  }
  .navbar-fixed-top {
      margin: 0 !important;
  }
  .box-item {
      width: 280px;
  }
  .seaBkg {
      background-image: url(assets/images/mare_2x.jpg);
  }
}

Landscape:

   @media only screen and (min-device-width: 480px) and (max-device-width: 640px) {
   body {
       padding: 0 !important;
   }
   .heroImage {
       margin-top: 0;
       height: 200px;
       width: 100%;
       background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
   }
   .navbar-fixed-top {
       margin: 0 !important;
   }
   .box-item {
       width: 440px;
   }
   .infoShowWrapper {
       width: 440px;
   }
   .seaBkg {
       background-image: url(assets/images/mare_2x.jpg);
   }
}

ランドスケープコードは考慮されていないようなものです

cssmedia-queries
12
rob.m

追加してみてください

orientation : landscape

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {

//enter code here
}

this site またはthis snippetを参照してください。

25
Danield