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

最新推荐文章于 2024-08-27 11:25:15 发布

山外人家

最新推荐文章于 2024-08-27 11:25:15 发布

阅读量5.9k

点赞数

分类专栏：日常总结文章标签： html 手机前端 js

本文链接：https://blog.csdn.net/liyujia6636/article/details/75579592

版权

日常总结专栏收录该内容

23 篇文章 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>