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

Question

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

针对大多数智能手机的 媒体查询 3 针对 iphone 纵向、横向和 ipad 纵向的媒体查询

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

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
}

请参阅此站点或此代码段以供参考。

Answer 2

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

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