智能手机纵向、横向和桌面的媒体查询？

Question

我正在尝试为智能手机方向和桌面设置不同的媒体查询，我想定位纵向和横向。我知道所有其他堆栈链接，例如：

Media query to target most of smartphone 3 media queries for iphone portrait, landscape and ipad portrait

但我仍然有问题，我的景观之一不工作，这是我正在使用的代码：

Desktop css first
   -- css for desk --

Portrait:

   @media only screen 
     and (min-device-width: 320px) 
     and (max-device-width: 479px) {

}

Landscape:

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

}

横向代码就像没有考虑过

Answer 1

尝试添加

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 以供参考。

Answer 2

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

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