智能手机肖像,风景和桌面的媒体查询？

Question

我正在尝试为智能手机方向和桌面设置不同的媒体查询,我想要定位肖像和风景.我知道所有其他堆栈链接,如:

媒体查询定位大多数智能手机 3媒体查询的iphone肖像,风景和ipad肖像

但是我仍然遇到问题,我的情况不起作用,这是我正在使用的代码:

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);
   }
}

景观代码甚至没有被考虑过

Answer 1

Try adding

orientation : landscape

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

//enter code here
}

See this site or this snippet for reference.

Answer 2

处理高度比处理宽度更好，因为宽度的尺寸幅度很大，而移动设备的 575.98px 至少目前是一个覆盖很多设备的范围。

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
//enter code here
}