prevent pinch-zoom events on mobile

blairdow · Oct 29, 2023 · 8975d4d · 8975d4d
1 parent 03c6193
commit 8975d4d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/build/css/style.css b/build/css/style.css
@@ -547,6 +547,10 @@
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.\[touch-action\:pan-x_pan-y\] {
+  -ms-touch-action: pan-x pan-y;
+      touch-action: pan-x pan-y;
+}
 html, body {
   height: 100%;
 }

diff --git a/index.html b/index.html
@@ -29,7 +29,7 @@ <h2>Your High Scores</h2>
                     </ol>
                 </div>
             </section>
-            <div id="game-container" class="game-container sm:mx-auto">
+            <div id="game-container" class="game-container sm:mx-auto [touch-action:pan-x_pan-y]">
                 <!--start screen-->
                 <section id="start-screen" class="py-5">
                     <h2>Welcome to BlairSnake!<br>This is not your ordinary game of snake.</h2>
@@ -67,7 +67,7 @@ <h2 class="speed inline-block">choose your speed...</h2>
             <div class="flex-1 max-sm:hidden"></div>
 
             <!-- keypad for mobile/touch devices -->
-            <section class="keypad justify-center w-full p-4 pt-1">
+            <section class="keypad justify-center w-full p-4 pt-1 [touch-action:pan-x_pan-y]">
                 <div class="basis-[480px]">
                     <div class="grid grid-cols-6 grid-rows-2 gap-1 mb-4">
                         <button id="up" class="mt-0 col-span-2 col-start-3" data-key="up">&#8673;</button> <!-- up arrow -->