CSS媒體查詢取向和縱向器件寬度邏輯

Question

我有兩個div，我將稱其爲& B的期望的行爲是：

1. 如果屏幕寬度小於400像素，只A應該是可見的。
2. 如果橫向畫面大於400像素寬度，但縱向小於400像素，則只有B可見。
3. 否則（縱向和橫向的屏幕寬度都大於400px），A和B都應該可見。

第二項是證明存在問題的項目。

我目前的做法正在爲iOS設備，which always report min-device-width & max-device-width as the portrait values無論當前的屏幕方向，而不是針對Android和其他人，其中device-width值與方向改變：

/* item 3 */ 
.a, .b { 
    display: block; 
} 

/* item 2 */ 
@media only screen and (min-width: 400px) and (max-device-width: 400px) and (orientation: landscape) { 
    .a { display: none; } 
} 

/* item 1 */ 
@media only screen and (max-width: 400px) { 
    .b { display: none } 
} 

是否有可能實現這個行爲純粹在媒體查詢中，以便它可以在所有設備上工作？

我很想避免使用JavaScript，UA嗅探和使用deprecated media types（如手持設備）（如果可能）。

Answer 1

一種解決方案是增加第二個媒體查詢項目2，靶向max-device-height：無論當前的屏幕方向

/* item 2a - iOS */ 
@media only screen and (min-width: 400px) and (max-device-width: 400px) { 
    .a { display: none; } 
} 
/* item 2b - everything else */ 
@media only screen and (min-width: 400px) and (max-device-height: 400px) { 
    .a { display: none; } 
} 

2A主攻iOS設備始終報告min-device-width & max-device-width的肖像值。

2b針對每個其他報告設備min-device-width & max-device-width基於當前屏幕方向。因此，如果屏幕方向是橫向，則max-device-height表示縱向方向屏幕寬度。

這些媒體查詢也可以與一個,組合：

/* item 2 */ 
@media only screen and (min-width: 400px) and (max-device-width: 400px) and (orientation: landscape), only screen and (min-width: 400px) and (max-device-hieght: 400px) and (orientation: landscape) { 
    .a { display: none; } 
}