css - 当视口初始比例为 0.5 时，媒体查询不起作用

Question

我正在尝试针对多个设备，并区分纵向和横向，我使用的媒体查询是：

  @media only screen 
  and (min-width : 320px)
  and (max-width : 360px) {
    body {
      background-color: red;
    }
  }
  @media only screen 
  and (min-width : 360px)
  and (orientation: landscape) {
    body {
      background-color: blue;
    }
  }

虽然页面的初始比例为 1.0，但它工作得很好，但是一旦它更改为 0.5（我为支持 iPhone 所做的一些修改），它就会忽略红色背景（纵向模式）。

我制作了一个简单的网页，以便您可以亲眼目睹：http: //s-goldy.com/viewport.html （0.5 和 1 是调整元视口的按钮）

同样的问题也出现在我的 HTC One S 上。

谢谢！