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);