Better Way to Use orientationchange Event on Mobil

When I was using orientationchange event, I met a few bugs. So, I take it down.

When I was testing my code on my android, it was ok. However, it doesn"t work on my boss"s iPhone6. So, i have to change the code.

The origin code was like:

html,
body {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  background: pink;
}

.box.landscape {
  background: lightblue;
}

let box = document.getElementById("box")
window.addEventListener("orientationchange", orientationChangeCb)
function orientationChangeCb(event) {
  let isLand = isLandscape()
  if (isLand) {
    box.classList.add("landscape")
  } else {
    box.classList.remove("landscape")
  }
}
function isLandscape() {
  if ("orientation" in window) {
    return Math.abs(window.orientation) === 90
  } else {
    return window.innerWidth > window.innerHeight
  }
}

To be compatible with iPhone6, I use resize event instead.

However, the better way I think is :

let eventForOrientationChange =
  "onorientationchange" in window ? "orientationchange" : "resize"
if (isMobile()) {
  window.addEventListener(eventForOrientationChange, orientationChangeCb)
}

Because onorientationchange is a mobile event, so if you try to run code below on your computer with chrome, you will get:

window.onorientationchange //undefined
"onorientationchange" in window //false

It seems a little weird but it"s true until chrome 69. That"s why I add isMobile() before I use window.addEventListener. In that case, we don"t have to listen for the resize event on desktop.

According to mdn, window.orientation has been Deprecated. However, similar API screen.orientation has a big problem for compatibility. Safari and QQ doesn"t support. As of 2018.10.4, global support in caniuse is only 72.5%.

If you just want to update style, you don"t have to use code above. CSS media queries
support code like:

@media (min-height: 680px), screen and (orientation: portrait) {
  /* ...; */
}
@media (min-height: 680px), screen and (orientation: landscape) {
  /* ...; */
}

Original Post

detect viewport orientation, if orientation is portrait display alert message advising user of instructions