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) {
/* ...; */
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。