fix: 修复 iOS Safari 快速点击按钮触发页面缩放问题
- 添加 touch-action: manipulation 禁用双击缩放 - 添加 -webkit-tap-highlight-color: transparent 移除点击高亮 - 在全局样式和修改评分页面按钮上应用 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
DevOps
31
App.vue
31
App.vue
@@ -2,17 +2,44 @@
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
// 禁用 iOS Safari 双击缩放
|
||||
this.disableDoubleTapZoom()
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
},
|
||||
methods: {
|
||||
disableDoubleTapZoom() {
|
||||
// #ifdef H5
|
||||
let lastTouchEnd = 0
|
||||
document.documentElement.addEventListener('touchstart', function(event) {
|
||||
if (event.touches.length > 1) {
|
||||
event.preventDefault()
|
||||
}
|
||||
}, { passive: false })
|
||||
|
||||
document.documentElement.addEventListener('touchend', function(event) {
|
||||
const now = Date.now()
|
||||
if (now - lastTouchEnd <= 300) {
|
||||
event.preventDefault()
|
||||
}
|
||||
lastTouchEnd = now
|
||||
}, { passive: false })
|
||||
|
||||
// 禁用手势缩放
|
||||
document.documentElement.addEventListener('gesturestart', function(event) {
|
||||
event.preventDefault()
|
||||
}, { passive: false })
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
|
||||
@import "common/common.css";
|
||||
/* 注意要写在第一行，同时给style标签加入lang=scss属性 */
|
||||
@import common/common.css;
|
||||
</style>
|
||||
|
||||
@@ -28,3 +28,14 @@ button::after {
|
||||
input {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 防止 iOS Safari 双击缩放 */
|
||||
button, .control-btn, [class*="btn"] {
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 全局禁用双击缩放 */
|
||||
html {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
28
index.html
28
index.html
@@ -3,15 +3,39 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 禁用 iOS Safari 双击缩放
|
||||
(function() {
|
||||
var lastTouchEnd = 0;
|
||||
document.addEventListener('touchend', function(event) {
|
||||
var now = Date.now();
|
||||
if (now - lastTouchEnd <= 300) {
|
||||
event.preventDefault();
|
||||
}
|
||||
lastTouchEnd = now;
|
||||
}, { passive: false });
|
||||
|
||||
// 禁用双击缩放
|
||||
document.addEventListener('dblclick', function(event) {
|
||||
event.preventDefault();
|
||||
}, { passive: false });
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>请开启JavaScript运行本应用</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
</view>
|
||||
|
||||
<view class="score-control">
|
||||
<view class="control-btn decrease" @click="decreaseScore">
|
||||
<view class="control-btn decrease" @touchstart.prevent="decreaseScore" @click.prevent="decreaseScore">
|
||||
<text class="btn-symbol">－</text>
|
||||
<text class="btn-value">-0.001</text>
|
||||
</view>
|
||||
@@ -60,7 +60,7 @@
|
||||
<text class="no-modify-text">可不改</text>
|
||||
</view>
|
||||
|
||||
<view class="control-btn increase" @click="increaseScore">
|
||||
<view class="control-btn increase" @touchstart.prevent="increaseScore" @click.prevent="increaseScore">
|
||||
<text class="btn-symbol">＋</text>
|
||||
<text class="btn-value">+0.001</text>
|
||||
</view>
|
||||
@@ -459,6 +459,10 @@ export default {
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
|
||||
@@ -389,6 +389,8 @@ export default {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.venue-tab.active {
|
||||
@@ -441,6 +443,8 @@ export default {
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.project-btn.active {
|
||||
@@ -527,6 +531,8 @@ export default {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.modify-btn:active {
|
||||
|
||||
Reference in New Issue
Block a user