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>