媒体查询方向:横向不起作用

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

我刚刚遇到了一个问题，我想它是一样的……当你用inspect移动模拟器检查你的应用程序时，在顶部栏上有一个缩放选项。如果缩放值小于100%，为什么CSS不将方向视为横向，而忽略@media的所有CSS (我认为这是浏览器的问题)。Chrome和Opera都有缩放选项，在这两种浏览器上，你都有相同的问题(Firefox除外)。

因此有两种选择：

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