Add code to prevent zoom on double tap

Jonatandb · May 25, 2024 · dbb2ef9 · dbb2ef9
1 parent 56128be
commit dbb2ef9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <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">
   <meta name="description" content="Flashcards Web App, Author: [email protected], Fullstack Software Developer">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="styles.css">

diff --git a/scripts.js b/scripts.js
@@ -115,5 +115,14 @@ function modifyCard(cardDiv) {
   }
 }
 
-document.addEventListener('DOMContentLoaded', renderFlashcards);
+// Prevent zoom on double tap
+let lastTouchEnd = 0;
+document.addEventListener('touchend', function (event) {
+  let now = (new Date()).getTime();
+  if (now - lastTouchEnd <= 300) {
+    event.preventDefault();
+  }
+  lastTouchEnd = now;
+}, false);
 
+document.addEventListener('DOMContentLoaded', renderFlashcards);
diff --git a/styles.css b/styles.css
@@ -18,6 +18,7 @@
 body {
   color: var(--light);
   background-color: var(--dark);
+  -webkit-text-size-adjust: 100%;
 }
 
 .container {
@@ -94,7 +95,7 @@ button {
 .edit,
 .delete {
   background-color: transparent;
-  margin: 10px 4px;
+  margin: 10px 8px;
   font-size: 20px;
 }
 
@@ -122,7 +123,7 @@ button {
 .modal h2 {
   font-size: 36px;
   text-align: center;
-  margin-bottom: 50px;
+  margin-bottom: 15px;
 }
 
 .wrapper {