媒体查询方向：横屏不起作用

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似乎不起作用。

- Debabrata Mohanta

---

避免在桌面环境中测试时使用max-device-*和min-device-*。http://stackoverflow.com/a/36749882/3597276 - Michael Benjamin

我不确定。由于现在手机的尺寸各不相同，所以如果横向为480像素，纵向为320像素，则两者都应该在max-device-width: 600px之下。这是我的假设，可能是错误的。 - Debabrata Mohanta

我的回答可能对你有用：响应式网站上的媒体查询常见断点 - Michael Benjamin

我也遇到了同样的问题。实际上，如果您在纵向查询之前放置横向查询，则它可以工作，但是纵向查询将无法工作。因此，如果有人有这个“问题”的解决方案，请在此处提及。 - Lakshay Kumar

@LakshayKumar 他们在 CSS-tricks 中使用的是一个通用的查询（没有 orientation 条件），接着是一个用于肖像模式的查询以及一个适用于所有设备的横向查询。不过，这个列表似乎还有一些其他条件问题。 - CPHPython

Answer 1

我刚遇到一个问题，我觉得可能是一样的问题...... 当你在移动模拟器上检查你的应用程序时，顶部栏有一个缩放选项。如果缩放值小于100%，CSS就不会将方向视为横向，并忽略所有@ media中的CSS（我认为这是浏览器的问题）。Chrome和Opera都有这个缩放选项，在这两个浏览器上，你都会遇到同样的问题（但在Firefox上不会）。

所以有两个选择：

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

- Vaxo Maisuradze

Answer 2

交换分辨率对我有用，不过我只在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) {}

- soularcher