OrientationChange 行为很奇怪

Question

I have a website which should show an image when the browser is in portrait mode, and hide it again when in landscape. I have tested this feature with chrome responsive mode and there it acts fine, but when trying to run the site on iphone or ipad the feature acts up. Code looks like this

let mql = window.matchMedia("(orientation: portrait)")
window.onorientationchange = rotate;

function rotate() {
    if(mql.matches) {
        document.querySelector("#rotation").classList.remove("hide");
        document.querySelector("#game").classList.add("hide");
    } else {
        document.querySelector("#rotation").classList.add("hide");
        document.querySelector("#game").classList.remove("hide");
    }
}

The way it acts on iphone and ipad is that #rotation shows when in landscape and hides when in portrait, which is basically the total opposite of the code, as I read it.

Is anyone familiar with this issue, and anyone know of a fix for it?

thanks in advance

Answer 1

I think instead calling that function window.onorientationchange = rotate; you should do following

let mql = window.matchMedia("(orientation: portrait)")

function rotate(event) {
    if(event.matches) {
        document.querySelector("#rotation").classList.remove("hide");
        document.querySelector("#game").classList.add("hide");
    } else {
        document.querySelector("#rotation").classList.add("hide");
        document.querySelector("#game").classList.remove("hide");
    }
}

// this addListner is going to deprecate soon
mql.addListner(rotate);
// you can use below if you don't want to support <= iOS 13 browsers
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
mql.addEventListner("change", rotate);