window.matchMedia即使存在媒体查询也不会更改

Question

有一个包含以下规则的CSS文件：

@media screen and (orientation:portrait) {
  .foo {}
}
@media screen and (orientation:landscape) {
  .foo {}
}

然后我有了这个脚本，在orientationchange上运行：

function checkOr(){
    if (window.matchMedia("(orientation:portrait)").matches) {
      console.log('portrait ' + window.orientation);
    } else {
      console.log('landscape '+ window.orientation);
    }
}

但是当window.orientation返回正确的值时，matchMedia总是返回页面的初始状态：

portrait -90
portrait 0
portrait -90

使用最新的iOS更新在iPhone 5和iPad 4上进行测试。

我做错了什么？ Webkit bugtracker说每个媒体查询都必须有规则，但这不是我的情况。

Answer 1

如何添加事件以调用orientationchange上的函数？我刚刚在我的iPad上试过这个，看起来效果很好：http://jsbin.com/ewixuc/2

function checkOr(){
    if (window.matchMedia("(orientation:portrait)").matches) {
      alert('portrait ' + window.orientation);
    } else {
      alert('landscape '+ window.orientation);
    }
}

window.addEventListener("orientationchange", checkOr);