本质是视觉缩放与事件坐标系统脱节：浏览器渲染层放大内容，但touch/click的clientx/clienty仍基于原始布局视口；需统一viewport设置、避免transform缩放、修复ios双击缩放及微信隐式缩放干扰。
缩放后点击事件偏移，本质是视觉缩放与坐标系统脱节——浏览器渲染层放大了内容，但 touch/click 事件的 clientX/clientY 仍基于原始布局视口坐标。这不是 JS 逻辑错误，而是 viewport、CSS 渲染和事件坐标三者未对齐导致的。
检查并修正 viewport 元标签
90% 的偏移问题源于 viewport 设置冲突或缺失：
- 必须包含 width=device-width 和 initial-scale=1.0，缺一不可；写死 width=375 或遗漏 initial-scale 会导致缩放基准错乱
- 禁用 user-scalable=no、maximum-scale=1.0 等锁死缩放的属性——它们虽阻止用户操作，但若页面被系统级缩放（如微信字体设置）或强制触发 pinch-zoom，反而加剧坐标偏移
- 确保该 标签位于 最顶部，早于所有 CSS 和 JS，防止被第三方 SDK 动态覆盖
避免 transform: scale() 干扰事件坐标
用 CSS transform 缩放整个页面（如 body { transform: scale(1.2); }）会拉伸像素，但不改变 layout viewport 尺寸，导致 touch 坐标映射失效：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 点击区域视觉上变大，但事件坐标仍按原始尺寸计算，造成“点不准”
- 固定定位元素（position: fixed）偏移更明显，因 transform 不影响其脱离文档流的定位基准
- 解决方案：改用 rem 动态根字号 或 CSS 自定义属性 + clamp() 实现语义化缩放，保持坐标系统纯净
修复 iOS Safari 双击缩放引发的偏移
iOS 双击 zoom 后常出现点击错位，多因容器限制阻断了缩放上下文：
- 检查 html> 和 是否设置了 overflow: hidden 或 height: 100% —— 这会让 Safari 认为“无可缩放内容”，降级为渲染层缩放，触发坐标偏移
- 给全屏 fixed 遮罩层添加 -webkit-overflow-scrolling: touch，确保手势可穿透到底层可缩放区域
- 确保页面最小宽度 ≥ 320px（例如 body { min-width: 320px; }），避免 Safari 因内容过窄而禁用双击缩放逻辑
微信等 Webview 中的特殊处理
微信 X5 内核会响应用户全局字体设置，产生隐式缩放，进而干扰事件坐标：
- 这种缩放无法通过 viewport 禁用，需在 JS 中监听 text-size-adjust 影响，动态重算关键按钮的 hit-area
- 对核心可点击区域（如按钮、卡片），显式设置 min-height / min-width 并用 padding 扩展热区，抵消字体放大带来的布局挤压
- 避免用
document.documentElement.style.zoom或修改 meta content 强制缩放——Webview 原生层不响应这类 JS 操作，徒增不确定性
