3

有一个带有这些规则的 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说每个媒体查询都必须有规则,但这不是我的情况。

4

1 回答 1

0

您如何添加事件以在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);
于 2013-06-07T13:03:29.357 回答