前端开发者| web前端开发课程下载 |
| 前端开发源码下载 |
| 前端开发工作周报模板下载 |
知识点：
横竖屏时的旋转角度：window.orientation
横竖屏改变时触发之：window.orientationchange（resize可代之，但输入法键盘显示时亦触发）
问题：
有些浏览器orientationchange时获取的窗口宽高为旋转前的宽高。
解决：
orientationchange触发后延时获取
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta
name=”viewport”
content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui”
/>
<meta charset=”UTF-8″ />
<title></title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap div {
display: flex;
justify-content: center;
align-items: center;
background: #000;
font-size: 45px;
color: #fff;
}
</style>
</head>
<body>
<div id=”wrap”><div></div></div>
<script>
var p = document.querySelector(‘#wrap div’)
function ori() {
var ww = window.innerWidth
var wh = window.innerHeight
var o = window.orientation
if (o == 0) {
p.style.width = wh + ‘px’
p.style.height = ww + ‘px’
p.style.marginTop = (wh – ww) / 2 + ‘px’
p.style.marginLeft = (ww – wh) / 2 + ‘px’
p.style.transform = ‘rotate(90deg)’
} else {
p.style.width = ww + ‘px’
p.style.height = wh + ‘px’
p.style.marginTop = 0 + ‘px’
p.style.marginLeft = 0 + ‘px’
p.style.transform = ‘rotate(0)’
}
p.innerHTML = ww + ‘:’ + wh + ‘:’ + o
}
ori()
window.addEventListener(
‘onorientationchange’ in window
? ‘orientationchange’
: ‘resize’,
function() {
setTimeout(ori, 150)
},
)
</script>
</body>
</html>
| 前端开发代码下载 |
| html 前端开发模板下载 |
| wbe前端开发编译器下载 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册