orientationchange事件在获取页面宽高时出错

最新推荐文章于 2024-06-29 19:17:01 发布

allWords

最新推荐文章于 2024-06-29 19:17:01 发布

阅读量1.2k

点赞数

分类专栏： ui js 文章标签： html 手机前端 javascript 手机屏幕切换

ui 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

问题描述

做一个项目时，需要适应手机旋转，每次旋转后需要获取页面宽高。有两种事件可以使用：一是orientationchange，一是resize。先使用了orientationchange，结果发现对于部分浏览器（包括微信浏览器），由竖屏旋转到横屏时，获得的宽度和高度是竖屏时的宽高，而由横屏转到竖屏时，获得的宽度和高度是横屏时的宽高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//cdn.jsdelivr.net/eruda/1.2.2/eruda.min.js"></script>
    <script>
        eruda.init();
    </script>
</head>
<body>
    <script>
        window.addEventListener('orientationchange', function () {
            setTimeout(function () {
                var page_w = document.documentElement.clientWidth;
                var page_h = document.documentElement.clientHeight;
                console.log(page_w, page_h);
            },200);
        });
        // window.addEventListener('resize', function () {
        //     var page_w = document.documentElement.clientWidth;
        //     var page_h = document.documentElement.clientHeight;
        //     console.log(page_w, page_h);
        // });
    </script>
</body>
</html>