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

【问题标题】：Media queries orientation : landscape not working媒体查询方向：横向不起作用
【发布时间】：2021-03-11 15:52:07
【问题描述】：

我有这样写的媒体查询：

@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 似乎不适用。

【问题讨论】：

避免使用max-device-* 和min-device-*，至少在桌面环境中进行测试。 stackoverflow.com/a/36749882/3597276
我正在使用 chrome USB 调试，它清楚地向我显示了正在应用的纵向 css 但不是横向
两个查询是否应该具有相同的max-device-width 表达式？
我这里的回答可能对你有用：Common breakpoints for media queries on a responsive site
我也遇到了同样的问题。实际上，如果您将横向查询放在纵向查询之前，那么它可以工作，但纵向查询将不起作用。因此，如果有人有此“问题”解决方案，请在此处提及。

标签： css media-queries

【解决方案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) {}

【讨论】：

【解决方案2】：

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

所以有两种选择：

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

【讨论】：