【无标题】判断页面是否缩放js

最新推荐文章于 2024-04-17 09:54:13 发布

饶庆兵phpjava_go_python

最新推荐文章于 2024-04-17 09:54:13 发布

阅读量149

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_25261441/article/details/134068359

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
    <title>判断页面是否缩放</title>
</head>
<body>
<output id="result"></output>
</body>
</html>
<script type="text/javascript">
    let originPixelRatio = localStorage.devicePixelRatio;
    if (!originPixelRatio) {
        originPixelRatio = window.devicePixelRatio;
        // 整数保存
        if (Number.isInteger(originPixelRatio)) {
            localStorage.devicePixelRatio = originPixelRatio;
        }
    }
    let lastPixelRatio = originPixelRatio;
    window.addEventListener('resize', function () {
        let currentPixelRatio = window.devicePixelRatio;
        if (currentPixelRatio !== lastPixelRatio) {
            result.innerHTML = '页面发生了缩放，缩放比例应该是：' + Math.round(1000 * (currentPixelRatio / originPixelRatio)) / 10 + '%';
        }
        lastPixelRatio = currentPixelRatio;
    });
    result.innerHTML = '当前缩放比例为：' + Math.round(1000 * (window.devicePixelRatio / originPixelRatio)) / 10 + '%';
</script>