disable image zoom on small screens so pinch to zoom works

describo · Jun 14, 2024 · 6d1510b · 6d1510b
1 parent d8852a4
commit 6d1510b
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/vue-components/Image.vue b/src/vue-components/Image.vue
@@ -1,12 +1,18 @@
 <template>
     <div class="flex flex-col">
-        <img :src="src" data-zoomable />
-        <TipComponent>Click the image for a closer look!</TipComponent>
+        <div v-if="enableZoom">
+            <img :src="src" data-zoomable />
+            <TipComponent>Click the image for a closer look!</TipComponent>
+        </div>
+        <div v-else>
+            <img :src="src" />
+        </div>
     </div>
 </template>
 
 <script setup>
 const props = defineProps({
     src: { type: String, required: true },
 });
+const enableZoom = window.innerWidth > "900" ? true : false;
 </script>