3

There's a CSS file with these rules: 

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

And then I've got this script, running on orientationchange: 

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

But matchMedia always returns initial state of the page, when window.orientation returns correct value:

portrait -90
portrait 0
portrait -90

Tested on iPhone 5 and iPad 4 with latest iOS updates.

What am I doing wrong? Webkit bugtracker says that there must be rules for each media query, but that's not my case.

ralph.m
  • 13,468
  • 3
  • 23
  • 30
naorunaoru
  • 31
  • 1
  • 3
  • the window.matchMedia is bugged on Chrome, after one exits fullscreen mode it will return wrong values http://stackoverflow.com/questions/30753522/chrome-43-window-size-bug-after-full-screen – albanx Aug 19 '15 at 09:40

1 Answers1

0

How are you adding the event to call the function on orientationchange? I just tried this on my iPad and it seems to work fine: 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);
robtarr
  • 76
  • 3