css - 来自软键盘的媒体查询方向问题和 iPad 方向问题

Question

我已将我的媒体查询设置为:

@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
  // code here
}

@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
     // code here
    }

我必须包含 device-aspect-ratio 以抵消 Chrome 移动版中软键盘引起的方向变化。它运行良好，但在 iPad 上进行测试时，我发现将其切换为横向模式时，它会坚持显示纵向样式而不是横向样式。

当我删除横向样式的 min-device-aspect-ratio 时，它适用于横向的 iPad，但这会导致方向在 Chrome 移动 View 上从纵向变为横向键盘。有谁知道任何媒体查询来解释这两种情况？

Answer 1

当你切换它时会发生什么？即

@media screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1) {
   // code here
}