Question

我有此代码，它是可与Mouse and Touch一起使用的XY键盘。在移动设备（例如Iphone或Ipad）上，只有完全缩小后才能正常工作。放大后，手指触摸显示屏的位置与XY键盘上的Point的位置之间就会存在此偏移。当我进一步放大时，情况变得更糟。

我尝试了

<meta name="viewport" content=" width=device-width, initial-scale=1.0, user-scalable=0" />

要在移动设备上禁用缩放（这是不理想的），但这是行不通的。

<!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"></pre>
</body>
</html>

理想情况下，我希望能够在移动设备上放大/缩小而不会出现此问题。我将如何解决这个问题？

在iOS设备上放大时触摸偏移？

0 个答案: