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>
2025-12-23 23:48:12 +08:00
parent f9efd8baa8
commit c0f2a4ddb4
5 changed files with 76 additions and 4 deletions
--- a/index.html
+++ b/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>