修复iOS端页面拖动问题：添加viewport设置和CSS适配，禁用不必要的触摸行为和滚动

1 month ago · 395cc535e8
1 changed files with 58 additions and 12 deletions
--- a/certificate.html
+++ b/certificate.html
@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>合格证信息</title>
  <style>
    * {
@ -15,13 +15,43 @@
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: #f5f5f5;
      color: #333;
+      /* 防止iOS触摸拖动 */
+      -webkit-overflow-scrolling: touch;
+      overflow-x: hidden;
+      position: relative;
+      touch-action: manipulation;
+    }
+    
+    /* 防止iOS设备上的弹性滚动 */
+    html, body {
+      height: 100%;
+      overflow: hidden;
+      overscroll-behavior: none;
+    }
+    
+    /* 防止弹窗背景滚动 */
+    .modal {
+      /* 防止iOS触摸事件穿透 */
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+    
+    /* 防止按钮等元素的默认触摸行为 */
+    button, input, canvas {
+      touch-action: manipulation;
    }

    .container {
      max-width: 480px;
      margin: 0 auto;
      background-color: white;
-      min-height: 100vh;
+      height: 100%;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
      position: relative;
    }

@ -421,35 +451,35 @@
      <div class="modal-body">
        <form id="certificateForm">
          <div class="form-group">
-          <label for="subjectName">主体名称：</label>
+          <label for="subjectName">主体名称：<span style="color: red;">*</span></label>
          <input type="text" id="subjectName" name="subjectName" required>
        </div>
        <div class="form-group">
-          <label for="productName">产品名称：</label>
+          <label for="productName">产品名称：<span style="color: red;">*</span></label>
          <input type="text" id="productName" name="productName" required>
        </div>
        <div class="form-group">
-          <label for="weight">产品重量：</label>
+          <label for="weight">产品重量：<span style="color: red;">*</span></label>
          <input type="text" id="weight" name="weight" required>
        </div>
        <div class="form-group">
-          <label for="basis">承诺依据：</label>
+          <label for="basis">承诺依据：<span style="color: red;">*</span></label>
          <input type="text" id="basis" name="basis" value="质量安全控制符合要求" required>
        </div>
        <div class="form-group">
-          <label for="origin">产地：</label>
+          <label for="origin">产地：<span style="color: red;">*</span></label>
          <input type="text" id="origin" name="origin" required>
        </div>
        <div class="form-group">
-          <label for="contact">联系方式：</label>
+          <label for="contact">联系方式：<span style="color: red;">*</span></label>
          <input type="tel" id="contact" name="contact" required pattern="^1[3-9]\d{9}$" title="请输入11位手机号码">
        </div>
        <div class="form-group">
-          <label for="date">开具日期：</label>
+          <label for="date">开具日期：<span style="color: red;">*</span></label>
          <input type="date" id="date" name="date" required>
        </div>
        <div class="form-group">
-            <label>手写签名：</label>
+          <label>手写签名：<span style="color: red;">*</span></label>
          <div class="signature-container">
              <canvas id="signatureCanvas" width="300" height="150"></canvas>
              <div class="signature-actions">
@ -560,14 +590,30 @@
      container.innerHTML = html;
    }
    
+    // 禁用外部滚轮
+    function disableExternalScroll() {
+      // 保存原始的overflow值
+      document.body.style.overflow = 'hidden';
+    }
+    
+    // 恢复外部滚轮
+    function enableExternalScroll() {
+      // 恢复原始的overflow值
+      document.body.style.overflow = '';
+    }
+    
    function openModal() {
      document.getElementById('modal').classList.add('show');
+      // 禁用外部滚轮
+      disableExternalScroll();
      // 初始化签名画布
      initSignatureCanvas();
    }
    
    function closeModal() {
      document.getElementById('modal').classList.remove('show');
+      // 恢复外部滚轮
+      enableExternalScroll();
    }
    
    // 点击弹窗外部关闭