媒体查询方向：景观不起作用

Question

我有这样写的媒体查询：

@media only screen and (max-device-width: 600px) and (orientation: portrait) {
.img-responsive{
    height : 200px;
    width : 100px;
}
}

@media only screen and (max-device-width: 600px) and (orientation: landscape) {
.img-responsive{
    width : 95px;
    height : 100px;
}
}

纵向方向工作正常，但横向方向css似乎不适用。

Answer 1

交换分辨率对我有用，尽管我仅在Chrome中进行了测试

@media all and (max-width: 768px) and (max-height: 1024px) and (orientation:portrait) {}
@media all and (max-width: 1024px) and (max-height: 768px) and (orientation:landscape) {}

Answer 2

我刚刚遇到了一个问题，我认为它是一样的... 当您使用检查移动模拟器检查您的应用程序时，顶部栏上有一个缩放选项。如果缩放值小于 100%，为什么 CSS 不会将方向视为横向并忽略该@media 的所有 CSS（我认为这是浏览器问题）。 Chrome 和 Opera 具有该缩放选项，并且在这两种浏览器上，您都遇到了相同的问题（在 Firefox 上没有）。

所以有两种选择：

1. 始终以 100% 的缩放级别检查您的应用。 或者，如果您认为浏览器在这种情况下可以正常工作...
2. 不要在媒体查询中使用“方向”， 如果您不确定是否需要它。