PrefaceWhen I was using orientationchange event, I met a few bugs. So, I take it down.Maincompatibility problemWhen 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 //falseIt 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.orientationAccording 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 onlyIf you just want to update style, you don’t have to use code above. CSS media queriessupport code like:@media (min-height: 680px), screen and (orientation: portrait) { /* …; /}@media (min-height: 680px), screen and (orientation: landscape) { / …; */}Original PostReferencedetect viewport orientation, if orientation is portrait display alert message advising user of instructions