body经transform:scale()缩放后，获取元素触摸位置的iOS兼容方案

针对你遇到的body通过transform:scale()缩放后，触摸事件无法像鼠标事件那样用offsetX获取元素内精确位置的问题，这里有一个不需要硬编码缩放倍数、且兼容iPad/Safari的可行方案：

核心思路 #

问题的关键在于transform:scale()会改变页面的视觉呈现，但触摸事件的坐标是基于缩放后的视口像素，而我们需要的是元素自身CSS布局坐标系下的位置。我们可以通过以下两步实现：

1. 动态获取body的实际缩放比例（不需要硬编码）
2. 结合元素在视口中的实际位置，将触摸点坐标转换为元素自身坐标系的位置

实现代码 #

首先封装一个获取元素水平缩放比例的工具函数：

function getElementScaleX(element) {
  const style = window.getComputedStyle(element);
  const transform = style.transform;
  // 如果没有transform，默认缩放比例为1
  if (transform === 'none') return 1;
  // 用DOMMatrix解析transform矩阵，获取水平缩放因子
  const matrix = new DOMMatrix(transform);
  return matrix.a;
}

然后在你的移动事件处理函数中使用：

handleElementMove(e) {
  const targetElement = this; // 这里的this指向目标元素
  const bodyScale = getElementScaleX(document.body);
  let relativeX;

  if (e.type.includes('touch')) {
    // 处理触摸事件
    const touchPoint = e.changedTouches[0];
    // 获取元素在视口中的实际位置（已考虑所有transform）
    const elementRect = targetElement.getBoundingClientRect();
    // 计算触摸点相对于元素左边界的缩放后位置，再转换为元素自身坐标系的位置
    relativeX = (touchPoint.clientX - elementRect.left) / bodyScale;
  } else {
    // 鼠标事件直接使用offsetX即可
    relativeX = e.offsetX;
  }

  // relativeX就是你需要的、相对于元素左边界的精确位置
  console.log('相对于元素左边界的位置:', relativeX);
}

为什么这个方案可行？ #

• 动态获取缩放比例：通过DOMMatrix解析body的transform样式，能准确获取当前页面的实际缩放倍数，完全替代硬编码的判断逻辑，适配所有窗口/设备尺寸的缩放场景。
• 兼容Safari/iPad：DOMMatrix从Safari 10.1开始就已支持，完全满足你的iPad适配需求。
• 坐标转换准确：getBoundingClientRect()返回的是元素经过所有transform后的视口位置，确保触摸点与元素边界的差值是准确的缩放后像素，再除以缩放比例就得到了和鼠标offsetX一致的元素自身坐标系位置。

注意事项 #

• 如果你的目标元素自身也应用了transform，而不仅仅是body，则需要将getElementScaleX的参数改为目标元素，获取元素自身的缩放比例来计算。
• 确保事件绑定在目标元素上，或者正确获取到目标元素的getBoundingClientRect()，否则坐标计算会出现偏差。

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