Better Way to Use orientationchange Event on Mobile

Posted on | In

Preface

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

Main

compatibility problem

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:

<div class="box" id="box">
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)
}

isMobile ?

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.

window.orientation or screen.orientation

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%.

css only

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) {
  /* ...; */
}

Ending

Reference