У меня есть этот код, представляющий собой XY-Pad, который работает с мышью и сенсорным экраном.На мобильных устройствах (например, Iphone или Ipad) он работает хорошо только при полном уменьшении.Как только я увеличиваю масштаб изображения, происходит смещение между тем, где мой палец касается дисплея, и тем, где находится точка на XY-планшете.Это ухудшается при дальнейшем увеличении масштаба.
Я пытался
<meta name="viewport" content=" width=device-width, initial-scale=1.0, user-scalable=0" />
Отключить масштабирование на мобильных устройствах (что не идеально), но это не сработало.
<code><!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
html, body {
max-width: 500px; /*must be equal to BOXSIZE for center align*/
height: 100%;
margin: 0 auto;
padding: 0;
background-color: white;
text-align: center;
}
div {
font-family: Arial;
}
pre {
pointer-events: none;
}
</style>
<script>
const MY_EVENT = 'my_event';
const CONNECT = 'connect';
const UPDATE_DATA = 'update_data';
const BOXSIZE = 500;
const HANDLESIZE = 40;
var $box, $handle;
const boxid = "box";
// initial values
var x = 50;
var y = 21;
// this gets called when the values change
function XYUpdate() {
output.textContent = `X: ${x.toFixed(2)}\nY: ${y.toFixed(2)}`
}
// range; changed by setMinMax
const xR = {
min: 0,
max: 0.99
};
const yR = {
min: 0,
max: 0.99
};
// run when Page is loaded
$(document).ready(function() {
// set ranges
setMinMax(xR.min, xR.max, yR.min, yR.max);
// change range of control
function setMinMax(xmin, xmax, ymin, ymax) {
xR.min = xmin;
xR.max = xmax;
yR.min = ymin;
yR.max = ymax;
if (x < xmin) x = xmin;
if (x > xmax) x = xmax;
if (y < ymin) y = ymin;
if (y > ymax) y = ymax;
if (!$box) init();
else moveHandle();
XYUpdate();
}
function moveHandle() {
$handle.css({
left: (x - xR.min) / (xR.max - xR.min) * (BOXSIZE - HANDLESIZE),
top: (y - yR.min) / (yR.max - yR.min) * (BOXSIZE - HANDLESIZE)
});
}
// set up HTML and events
function init() {
$box = $("#" + boxid);
$box.css({
width: BOXSIZE,
height: BOXSIZE,
boxShadow: '0 0 0 5px #0AACCC',
boxSizing: "border-box",
position: "relative",
margin: '10px'
});
if (!$handle) $handle = $('<div>');
$handle.css({
width: HANDLESIZE,
height: HANDLESIZE,
backgroundColor: '#000',
position: "absolute"
});
moveHandle();
$box.append($handle);
// event handlers
$box.on("touchstart", e => {
handleGrabbed = true;
moveHandleToMouse(e);
});
$box.on("mousedown", e => {
handleGrabbed = true;
moveHandleToMouse(e);
});
$(document).on("touchmove", e => {
if (handleGrabbed) moveHandleToMouse(e);
}).on("touchend", () => {
handleGrabbed = false;
});
$(document).on("mousemove", e => {
if (handleGrabbed) moveHandleToMouse(e);
}).on("mouseup", () => {
handleGrabbed = false;
});
}
// handle state
var handleGrabbed = false;
// update handle position and calculate x/y
function moveHandleToMouse(e) {
const bcr = $box.get()[0].getBoundingClientRect();
// x/y here is graphical
if (e.clientX == undefined ) {
e.preventDefault();
var gx = event.touches[0].pageX - bcr.left - HANDLESIZE / 2;
var gy = event.touches[0].pageY - bcr.top - HANDLESIZE / 2;
}
else{
var gx = e.clientX - bcr.left - HANDLESIZE / 2;
var gy = e.clientY - bcr.top - HANDLESIZE / 2;
}
const BMH = BOXSIZE - HANDLESIZE;
// limit handle position to inside box
if (gx < 0) gx = 0;
if (gx > BMH) gx = BMH;
if (gy < 0) gy = 0;
if (gy > BMH) gy = BMH;
// actually move handle div
$handle.css({
left: gx,
top: gy
});
// graphical range is converted to 0 - 1 range with origin at bottom left
// then converted to actual range values
x = (gx / BMH) * (xR.max - xR.min) + xR.min;
y = (1.0 - gy / BMH) * (yR.max - yR.min) + yR.min;
XYUpdate();
}
});
</script>
</head>
<body>
<div id="box" style="padding: 10px"></div>
<pre id="output" style="padding: 10px"> В идеале я хочу иметь возможность увеличивать / уменьшать масштаб на мобильном без этой проблемы.Как мне исправить это?