来自软键盘的媒体查询方向问题和 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 移动视图上方向从纵向变为横向。有谁知道任何媒体查询来解释这两种情况？

Answer 1

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

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