DevOps 5349b80cf8 Fix: iOS Safari 双击缩放问题 - UniApp H5 专用解决方案 ...

问题描述：
- 用户在 iOS Safari 上快速点击加分/减分按钮时触发页面缩放
- 影响用户体验，导致操作困难

解决方案：
1. 全局事件拦截（index.html）
   - 拦截 touchstart/touchend 事件，检测快速连续触摸（<350ms）
   - 完全禁用 dblclick 和 gesture 事件
   - 使用 MutationObserver 动态监听 DOM 变化
   - 添加 CSS 强制禁用缩放

2. 组件级优化（modify-score.vue）
   - 使用 touchstart/touchend 替代 click 事件
   - 添加 300ms 防抖机制，忽略快速连续触摸
   - 实现长按连续加减分功能（500ms 后每 100ms 触发一次）
   - H5 平台条件编译，添加原生事件监听器
   - 清理定时器，防止内存泄漏

3. UniApp 特性应用
   - 使用条件编译 #ifdef H5 针对 H5 平台特殊处理
   - 利用 $nextTick 确保 DOM 渲染完成后添加事件监听
   - 保持跨平台兼容性（小程序、App 不受影响）

技术要点：
- touch-action: none 禁用触摸动作
- event.preventDefault() 阻止默认行为
- capture: true 在捕获阶段拦截事件
- passive: false 允许调用 preventDefault()

测试建议：
- 在 iOS Safari 上快速点击按钮，验证不再缩放
- 测试长按功能是否正常工作
- 验证其他平台（微信小程序、Android）不受影响

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2025-12-24 01:24:36 +08:00

17 KiB

Raw Blame History

View Raw