orientationchange 监听横竖屏切换
window.orientation 手机竖屏状态，有四个状态码。大家可以在真机尝试一下
-
- 竖屏：0 180
- 横屏: 90 -90
像王者荣耀的一些活动页面不希望用户在横屏状态下浏览，这里我们也可以实现
思路：监听用户横竖屏状态，当状态为90和-90时，我们显示一个box，对用户进行提示。
下面是例子：
devicemotion 监听手机加速度发生变化
devicemotion 和 deviceorientation 作用是一样的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
#box{
width: 300px;
height: 300px;
background: red;
color: #fff;
font:14px/30px "宋体";
}
style>
<body>
<div id="box">div>
<script>
window.addEventListener("deviceorientation",(e)=>{
let {x,y,z} = e.acceleration;
box.innerHTML = `
手机x方向加速度:${x}</br>
手机y方向加速度:${y}</br>
手机z方向加速度:${z}</br>
`
})
script>
body>
html>
在这里如果你是IOS手机，我们将会遇到一些坑！！！
devicemotion 和 deviceorientation
IOS 10: 必须使用https 协议
IOS 12.2:用户端必须在设置开启了动作与方向的权限
IOS 13: 需要 通过接口去获取 动作与方向的访问权限
IOS 13.3 : 必须用户手动触发（点击事件 touch）动作与方向访问权限的获取
有了上面的基础，我们可以来制作一个简易的小游戏——移动的方块
这里要注意一点：IOS 和 安卓的取值 是刚好相反
所以我们需要进行一个判断，对IOS和安卓进行兼容处理。
function getIos(){ var u = window.navigator.userAgent; return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); }
接下来就是实现我们的小游戏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#box {
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
background: red;
}
style>
head>
<body>
<div id="box">div>
<script>
let box = document.querySelector("#box");
let translateX = 0;
function getIos(){
let u = window.navigator.userAgent;
return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}
// 注意 IOS 和 安卓的取值 刚好相反
// x轴 IOS 下是 10 ，那安卓下就是 -10
window.addEventListener("devicemotion",(e)=>{
let {x} = e.accelerationIncludingGravity;
let {x:x2} = e.acceleration;
x -= x2;
if(!getIos()){
x = -x;
}
translateX += x;
box.style.transform = `translateX(${translateX}px)`;
});
script>
body>
html>
明天的重点便是面试常出现的函数防抖和函数节流！