JavaScript 监听屏幕旋转
JavaScript 大约 3015 字window orientationchange
监听orientationchange
事件。
window.onorientationchange = function (event) { }
window.screen.orientation change
在平板Surface
上onorientationchange
无法监听,可监听window.screen.orientation
的change
事件。
window.screen.orientation.addEventListener("change", function (e) {
}, false);
兼容代码
if ("onorientationchange" in window) {
window.onorientationchange = function (event) {
}
} else if ("screen" in window && "orientation" in window.screen) {
window.screen.orientation.addEventListener("change", function (e) {
}, false);
}
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
if ("onorientationchange" in window) {
window.onorientationchange = function (event) {
document.getElementById("init").innerText = "window.onorientationchange innerWidth#" + window.innerWidth + ", innerHeight#" + window.innerHeight;
document.getElementById("init2").innerText = "window.onorientationchange window.screen.width#" + window.screen.width + ", window.screen.height#" + window.screen.height;
document.getElementById("init3").innerText = "window.onorientationchange window.screen.availWidth#" + window.screen.availWidth + ", window.screen.availHeight#" + window.screen.availHeight;
document.getElementById("status").innerText = screen.orientation.type;
console.log(screen.orientation);
}
} else if ("screen" in window && "orientation" in window.screen) {
window.screen.orientation.addEventListener("change", function (e) {
document.getElementById("init").innerText = "window.screen.orientation change innerWidth#" + window.innerWidth + ", innerHeight#" + window.innerHeight;
document.getElementById("init2").innerText = "window.screen.orientation change window.screen.width#" + window.screen.width + ", window.screen.height#" + window.screen.height;
document.getElementById("init3").innerText = "window.screen.orientation change window.screen.availWidth#" + window.screen.availWidth + ", window.screen.availHeight#" + window.screen.availHeight;
document.getElementById("status").innerText = screen.orientation.type;
console.log(screen.orientation);
}, false);
}
</script>
</head>
<body>
<div id="init">test</div>
<br>
<div id="init2">test</div>
<br>
<div id="init3">test</div>
<br>
<div id="status">test</div>
<br>
<input type="text">
</body>
</html>
兼容性
阅读 1722 · 发布于 2021-06-26
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Docker 查看镜像分层信息阅读 1777
-
走进 Spring Boot 第一步之 Java Properties 类阅读 2619
-
Spring Boot JPA 为数据表列 Column 添加注释阅读 1604
-
软考-系统架构设计师:网络存储技术 - Raid阅读 1884
-
Go 在 Windows 上编译 Linux 版本阅读 4506
-
MySQL 全文检索设置停止词阅读 2509
-
Java volatile 内存屏障保证可见性和有序性阅读 1569
-
走进 Rust:结构体方法阅读 1956
-
软考-系统架构设计师:三级模式-两级映射阅读 1927
-
Kubernetes Namespace 命名规则阅读 833