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

fix: 修复 iOS Safari 快速点击按钮触发页面缩放问题

Browse Source 
- 添加 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
2025-12-23 23:48:12 +08:00
parent f9efd8baa8
commit c0f2a4ddb4
5 changed files with 76 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
App.vue
View File

@@ -2,17 +2,44 @@
export default { export default {
onLaunch: function() { onLaunch: function() {
console.log('App Launch') console.log('App Launch')
// 禁用 iOS Safari 双击缩放
this.disableDoubleTapZoom()
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')
}, },
onHide: function() { onHide: function() {
console.log('App Hide') 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> </script>
<style> <style>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ /* 注意要写在第一行，同时给style标签加入lang=scss属性 */
@import "common/common.css"; @import common/common.css;
</style> </style>

11
common/common.css
View File

@@ -28,3 +28,14 @@ button::after {
input { input {
outline: none; outline: none;
} }
/* 防止 iOS Safari 双击缩放 */
button, .control-btn, [class*="btn"] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* 全局禁用双击缩放 */
html {
touch-action: manipulation;
}

28
index.html
View File

@@ -3,15 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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> <title>武术评分系统</title>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> <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> </head>
<body> <body>
<noscript> <noscript>
<strong>请开启JavaScript运行本应用</strong> <strong>请开启JavaScript运行本应用</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected -->
</body> </body>
</html> </html>

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

@@ -459,6 +459,10 @@ export default {
} }
.control-btn { .control-btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
width: 140rpx; width: 140rpx;
height: 140rpx; height: 140rpx;
display: flex; display: flex;

6
pages/score-list-multi/score-list-multi.vue
View File

@@ -389,6 +389,8 @@ export default {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
} }
.venue-tab.active { .venue-tab.active {
@@ -441,6 +443,8 @@ export default {
color: #666666; color: #666666;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
} }
.project-btn.active { .project-btn.active {
@@ -527,6 +531,8 @@ export default {
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
font-weight: 500; font-weight: 500;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
} }
.modify-btn:active { .modify-btn:active {