window.matchMedia не меняется даже при наличии медиазапросов

Есть файл 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);
    }
}

Но matchMedia всегда возвращает начальное состояние страницы, когда window.orientation возвращает правильное значение:

portrait -90
portrait 0
portrait -90

Протестировано на iPhone 5 и iPad 4 с последними обновлениями iOS.

Что я делаю неправильно? Багтрекер Webkit говорит, что должны быть правила для каждого медиа-запроса, но это не мой случай.

1 ответ

Как вы добавляете событие, чтобы вызвать функцию ориентации? Я только что попробовал это на своем 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);
Другие вопросы по тегам