JavaScript 监听屏幕旋转

JavaScript About 3,015 words

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>

兼容性

https://www.caniuse.com/mdn-api_window_onorientationchange

https://www.caniuse.com/mdn-api_screenorientation_onchange

Views: 2,426 · Posted: 2021-06-26

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓