Следующий код создает сетку 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
Любая помощь будет оценена