DevOpsandClaude Opus 4.5
c5c31e8088
Problem:
- Rapid tapping on +0.001/-0.001 buttons triggered page zoom on iOS Safari
- Previous solutions (viewport meta, touch-action: manipulation) were ineffective
Solution implemented:
1. Enhanced global touch event handling in index.html:
- Added comprehensive gesture event prevention (gesturestart/change/end)
- Improved touchend debouncing with stopPropagation
- Added specific CSS rules for button elements with touch-action: none
2. Modified button interaction in modify-score.vue:
- Replaced @click events with @touchstart/@touchend handlers
- Added preventDefault and stopPropagation on touch events
- Implemented 100ms debounce to prevent rapid successive touches
- Added pointer-events: none to child elements to ensure touch targets
- Changed touch-action from 'manipulation' to 'none' for complete control
Technical details:
- touch-action: none completely disables browser touch gestures
- Event handlers use { passive: false } to allow preventDefault
- Debounce mechanism prevents accidental double-triggers
- Child elements have pointer-events: none to ensure parent handles all touches
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
72 lines
2.3 KiB
HTML
72 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<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">
|
|
<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;
|
|
-webkit-user-select: none !important;
|
|
user-select: none !important;
|
|
}
|
|
</style>
|
|
<script>
|
|
// 更强力的 iOS Safari 双击缩放禁用方案
|
|
(function() {
|
|
var lastTouchEnd = 0;
|
|
var lastTouchTarget = null;
|
|
|
|
// 阻止快速连续触摸导致的缩放
|
|
document.addEventListener('touchend', function(event) {
|
|
var now = Date.now();
|
|
var timeSinceLastTouch = now - lastTouchEnd;
|
|
|
|
// 如果两次触摸间隔小于 300ms，阻止默认行为
|
|
if (timeSinceLastTouch <= 300 && timeSinceLastTouch > 0) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
lastTouchEnd = now;
|
|
lastTouchTarget = event.target;
|
|
}, { passive: false });
|
|
|
|
// 阻止双击事件
|
|
document.addEventListener('dblclick', function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}, { passive: false });
|
|
|
|
// 阻止手势缩放
|
|
document.addEventListener('gesturestart', function(event) {
|
|
event.preventDefault();
|
|
}, { passive: false });
|
|
|
|
document.addEventListener('gesturechange', function(event) {
|
|
event.preventDefault();
|
|
}, { passive: false });
|
|
|
|
document.addEventListener('gestureend', function(event) {
|
|
event.preventDefault();
|
|
}, { passive: false });
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<strong>请开启JavaScript运行本应用</strong>
|
|
</noscript>
|
|
<div id="app"></div>
|
|
</body>
|
|
</html>
|