martial/martial-admin-mini
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix iOS Safari double-tap zoom issue with comprehensive solution

Browse Source 
Implemented multiple layers of protection to prevent iOS Safari from zooming when users quickly tap the score adjustment buttons:

1. Enhanced touch event handling in modify-score.vue:
   - Changed from touchend to touchstart for immediate response
   - Added .stop.prevent modifiers to all touch events (touchstart, touchmove, touchend, touchcancel)
   - Added noop() handlers to absorb unwanted events
   - Replaced time-based debouncing with isProcessing flag using requestAnimationFrame
   - Ensured all child elements have pointer-events: none

2. Comprehensive index.html protection:
   - Added iOS-specific meta tags (apple-mobile-web-app-capable, format-detection)
   - Enhanced CSS with touch-action: pan-y for scrolling while preventing zoom
   - Implemented 7-layer JavaScript protection:
     * Layer 1: Intercept rapid touchstart events with counter
     * Layer 2: Block touchend events within 300ms
     * Layer 3: Completely disable dblclick events
     * Layer 4: Prevent gesture events (gesturestart/change/end)
     * Layer 5: Use Pointer Events API for additional blocking
     * Layer 6: Filter rapid click events
     * Layer 7: Add capture-phase listeners to buttons
   - All event listeners use { passive: false, capture: true } for maximum control

This multi-layered approach addresses the root cause: iOS Safari triggers zoom at the browser level before JavaScript can normally intercept it. By using capture phase and preventing events at multiple stages, we ensure the zoom behavior is blocked.

Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
DevOps
2025-12-24 01:13:55 +08:00
parent c5c31e8088
commit 56c1320e40
2 changed files with 185 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
index.html
View File

@@ -4,29 +4,77 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>武术评分系统</title>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<style>
* {
touch-action: manipulation;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* 针对按钮元素禁用所有触摸动作 */
button, .control-btn, [class*="btn"] {
touch-action: none !important;
touch-action: pan-y !important;
-webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/* 针对按钮元素完全禁用触摸动作 */
button, .control-btn, [class*="btn"], [class*="control"] {
touch-action: none !important;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
}
/* 允许输入框正常交互 */
input, textarea {
touch-action: manipulation !important;
-webkit-user-select: text !important;
user-select: text !important;
}
</style>
<script>
// 更强力的 iOS Safari 双击缩放禁用方案
// 终极 iOS Safari 双击缩放禁用方案
(function() {
var lastTouchEnd = 0;
var lastTouchTarget = null;
'use strict';
// 阻止快速连续触摸导致的缩放
var lastTouchEnd = 0;
var lastTouchStart = 0;
var touchCount = 0;
var resetTimer = null;
// 方案1: 拦截所有快速连续的触摸事件
document.addEventListener('touchstart', function(event) {
var now = Date.now();
// 重置计数器
if (resetTimer) {
clearTimeout(resetTimer);
}
// 如果距离上次触摸结束小于300ms，增加计数
if (now - lastTouchEnd < 300) {
touchCount++;
// 如果是第二次或更多次快速触摸，阻止默认行为
if (touchCount >= 1) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
} else {
touchCount = 0;
}
lastTouchStart = now;
// 500ms后重置计数器
resetTimer = setTimeout(function() {
touchCount = 0;
}, 500);
}, { passive: false, capture: true });
// 方案2: 拦截touchend事件
document.addEventListener('touchend', function(event) {
var now = Date.now();
var timeSinceLastTouch = now - lastTouchEnd;
@@ -35,30 +83,80 @@
if (timeSinceLastTouch <= 300 && timeSinceLastTouch > 0) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
lastTouchEnd = now;
lastTouchTarget = event.target;
}, { passive: false });
}, { passive: false, capture: true });
// 阻止双击事件
// 方案3: 完全禁用双击事件
document.addEventListener('dblclick', function(event) {
event.preventDefault();
event.stopPropagation();
}, { passive: false });
event.stopImmediatePropagation();
return false;
}, { passive: false, capture: true });
// 阻止手势缩放
// 方案4: 禁用手势缩放
document.addEventListener('gesturestart', function(event) {
event.preventDefault();
}, { passive: false });
event.stopPropagation();
}, { passive: false, capture: true });
document.addEventListener('gesturechange', function(event) {
event.preventDefault();
}, { passive: false });
event.stopPropagation();
}, { passive: false, capture: true });
document.addEventListener('gestureend', function(event) {
event.preventDefault();
}, { passive: false });
event.stopPropagation();
}, { passive: false, capture: true });
// 方案5: 使用 Pointer Events 拦截
if (window.PointerEvent) {
var lastPointerUp = 0;
document.addEventListener('pointerup', function(event) {
var now = Date.now();
if (now - lastPointerUp < 300) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
lastPointerUp = now;
}, { passive: false, capture: true });
}
// 方案6: 监听 click 事件，过滤掉快速连续的点击
var lastClickTime = 0;
document.addEventListener('click', function(event) {
var now = Date.now();
var timeSinceLastClick = now - lastClickTime;
// 如果距离上次点击小于300ms，可能是双击导致的，阻止
if (timeSinceLastClick < 300 && timeSinceLastClick > 0) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
lastClickTime = now;
}, { passive: false, capture: true });
// 方案7: 禁用特定元素的默认行为
document.addEventListener('DOMContentLoaded', function() {
// 为所有按钮添加额外的事件监听
var buttons = document.querySelectorAll('button, .control-btn, [class*="btn"]');
buttons.forEach(function(btn) {
btn.addEventListener('touchstart', function(e) {
e.stopPropagation();
}, { passive: false, capture: true });
});
});
console.log('iOS Safari 双击缩放防护已启用');
})();
</script>
</head>

101
pages/modify-score/modify-score.vue
View File

@@ -52,8 +52,11 @@
<view class="score-control">
<view
class="control-btn decrease"
@touchstart="handleTouchStart"
@touchend="handleDecreaseTouch"
@touchstart.stop.prevent="handleDecrease"
@touchmove.stop.prevent="noop"
@touchend.stop.prevent="noop"
@touchcancel.stop.prevent="noop"
@click.stop.prevent="noop"
>
<text class="btn-symbol">－</text>
<text class="btn-value">-0.001</text>
@@ -66,8 +69,11 @@
<view
class="control-btn increase"
@touchstart="handleTouchStart"
@touchend="handleIncreaseTouch"
@touchstart.stop.prevent="handleIncrease"
@touchmove.stop.prevent="noop"
@touchend.stop.prevent="noop"
@touchcancel.stop.prevent="noop"
@click.stop.prevent="noop"
>
<text class="btn-symbol">＋</text>
<text class="btn-value">+0.001</text>
@@ -123,8 +129,7 @@ export default {
note: '',
minScore: 5.0,
maxScore: 10.0,
lastTouchTime: 0,
touchDebounceDelay: 100
isProcessing: false
}
},
@@ -209,42 +214,43 @@ export default {
uni.navigateBack()
},
handleTouchStart(e) {
// 阻止默认行为，防止触发双击缩放
e.preventDefault()
e.stopPropagation()
// 空操作函数，用于阻止事件
noop() {
// 什么都不做
},
handleDecreaseTouch(e) {
// 阻止默认行为和事件冒泡
e.preventDefault()
e.stopPropagation()
// 防抖处理
const now = Date.now()
if (now - this.lastTouchTime < this.touchDebounceDelay) {
handleDecrease(e) {
// 防止重复处理
if (this.isProcessing) {
return
}
this.lastTouchTime = now
this.isProcessing = true
// 执行减分逻辑
this.decreaseScore()
// 使用 requestAnimationFrame 确保在下一帧重置状态
requestAnimationFrame(() => {
this.isProcessing = false
})
},
handleIncreaseTouch(e) {
// 阻止默认行为和事件冒泡
e.preventDefault()
e.stopPropagation()
// 防抖处理
const now = Date.now()
if (now - this.lastTouchTime < this.touchDebounceDelay) {
handleIncrease(e) {
// 防止重复处理
if (this.isProcessing) {
return
}
this.lastTouchTime = now
this.isProcessing = true
// 执行加分逻辑
this.increaseScore()
// 使用 requestAnimationFrame 确保在下一帧重置状态
requestAnimationFrame(() => {
this.isProcessing = false
})
},
decreaseScore() {
@@ -507,11 +513,19 @@ export default {
}
.control-btn {
touch-action: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
/* 关键：完全禁用所有触摸行为 */
touch-action: none !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
/* 防止长按菜单 */
-webkit-touch-callout: none !important;
/* 防止文本选择 */
pointer-events: auto !important;
width: 140rpx;
height: 140rpx;
display: flex;
@@ -521,6 +535,19 @@ export default {
background-color: #F5F5F5;
border-radius: 12rpx;
cursor: pointer;
position: relative;
overflow: hidden;
}
.control-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
z-index: 1;
}
.control-btn.decrease {
@@ -534,7 +561,9 @@ export default {
.btn-symbol {
font-size: 48rpx;
font-weight: 300;
pointer-events: none;
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
}
.control-btn.decrease .btn-symbol {
@@ -548,7 +577,9 @@ export default {
.btn-value {
font-size: 24rpx;
margin-top: 8rpx;
pointer-events: none;
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
}
.control-btn.decrease .btn-value {