javascript - 移动网络 - 在 touchstart 事件上检测捏缩放级别

问题描述

下面的代码生成了一个 9x9 的网格，它覆盖了整个屏幕。

let grids = document.querySelectorAll('.inner-square');
grids.forEach((g)=>{
   g.addEventListener("touchstart",console.log)
})

body {
            margin: 0;
            padding: 0;
        }
        div {
            overflow: hidden;
            box-sizing: border-box;
        }
        .outer-grid {
            float: left;
            width: 100%;
            border: 1px solid gray;
            background-color: #9cc;
        }
        .outer-square {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #ccc;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
        .inner-grid {
            width: 33.3%;
            height: 33.3%;
            border: 1px solid red;
            display: table;
        }
        .inner-square {
            line-height: 100%;
            font-size: 50px;
            font-weight: bold;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="grid-container">
    <div class="outer-grid">
        <div class="outer-square">
            <div class="inner-grid">
                <div class="inner-square">1</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">2</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">3</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">4</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">5</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">6</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">7</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">8</div>
            </div>
            <div class="inner-grid">
                <div class="inner-square">9</div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

在移动设备上，如果可能的话，我想在不跟踪用户捏合/缩放交互的情况下检测用户触摸其中一个网格时的缩放级别。

没有缩放：

带变焦：

目前，无论是否缩放，触摸数据看起来都相似：

clientX: 501.446044921875
clientY: 834.9568481445312
force: 0.18110236525535583
identifier: 0
pageX: 501.446044921875
pageY: 834.9568481445312
radiusX: 0.756271481513977
radiusY: 0.756271481513977
rotationAngle: 0
screenX: 182.18182373046875
screenY: 391.2727355957031

clientX: 513.1174926757812
clientY: 820.4440307617188
force: 0.08661417663097382
identifier: 0
pageX: 513.1174926757812
pageY: 820.4440307617188
radiusX: 1.3598519563674927
radiusY: 1.3598519563674927
rotationAngle: 0
screenX: 205.8181915283203
screenY: 409.0909118652344

任何帮助都会得到帮助

标签： javascripthtmlcssmobilepinchzoom

javascript - 移动网络 - 在 touchstart 事件上检测捏缩放级别

问题描述

解决方案

推荐阅读