如何用CSS或HTML（搭配Greasemonkey）实现移动端捏合缩放并解决光标偏移？

针对你在Gartic Phone（garticphone.com）上通过EasyCanvas共享电脑屏幕到iPad，捏合缩放后绘图光标偏移的问题，以下是具体的原因分析和解决方案：

问题根源 #

Gartic Phone的绘图画布是基于页面原始布局坐标计算光标位置的，你尝试的几种缩放方式都没有同步更新画布的坐标映射逻辑：

• <meta name="viewport">：网站本身已设置桌面优先的viewport，新增标签会被浏览器忽略或覆盖，无效果。
• transform: scale()：仅做视觉层面的GPU渲染，页面布局坐标（clientX/clientY）仍保持原始尺寸，导致画布事件坐标与视觉位置不匹配，仅左上角（0,0）无偏移。
• zoom: 1.15：会修改页面布局坐标，但Gartic的光标计算逻辑未考虑缩放比例，直接使用缩放后的clientX/clientY，导致全局偏移。

解决方案：通过用户脚本修正坐标映射 #

使用Tampermonkey（或类似用户脚本工具）注入代码，拦截画布的鼠标事件，根据当前缩放比例修正光标坐标，确保视觉位置与实际绘图位置一致。

完整用户脚本代码 #

// ==UserScript==
// @name         Gartic Phone Zoom Cursor Fix
// @namespace    tampermonkey.net
// @version      0.1
// @description  Fix cursor offset when zooming Gartic Phone via EasyCanvas on iPad
// @match        https://garticphone.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let currentScale = 1;

    // 更新当前页面缩放比例
    function updateScale() {
        const docRect = document.documentElement.getBoundingClientRect();
        currentScale = docRect.width / window.innerWidth;
    }

    // 监听窗口缩放/ resize事件
    window.addEventListener('resize', updateScale);
    updateScale();

    // 定位Gartic的绘图画布（若页面结构变更，需调整选择器）
    const canvas = document.querySelector('canvas');
    if (!canvas) return;

    // 拦截并修正鼠标事件坐标
    ['mousemove', 'mousedown', 'mouseup', 'click'].forEach(evtName => {
        canvas.addEventListener(evtName, (e) => {
            e.preventDefault();
            e.stopPropagation();

            // 计算修正后的坐标
            const correctedX = e.clientX / currentScale;
            const correctedY = e.clientY / currentScale;

            // 触发修正后的事件
            const fixedEvent = new MouseEvent(evtName, {
                clientX: correctedX,
                clientY: correctedY,
                bubbles: true,
                cancelable: true
            });
            canvas.dispatchEvent(fixedEvent);
        }, true);
    });
})();

额外优化（针对EasyCanvas） #

如果EasyCanvas提供了自定义缩放事件或API（如获取当前缩放比例的方法），可以替换updateScale函数的逻辑，直接获取EasyCanvas的缩放值，精度更高：

// 示例：假设EasyCanvas提供了ec.getScale()方法
function updateScale() {
    currentScale = window.ec?.getScale() || 1;
}
// 监听EasyCanvas的缩放事件（假设事件名为'ec-scale-change'）
window.addEventListener('ec-scale-change', updateScale);

使用说明 #

1. 在电脑上安装Tampermonkey浏览器扩展
2. 创建新的用户脚本，粘贴上述代码
3. 打开Gartic Phone的单人测试模式，通过EasyCanvas共享到iPad
4. 捏合缩放页面，绘图光标将与视觉位置完全匹配

内容的提问来源于stack exchange，提问作者Radu