[Nuxt.js] 모바일 확대 방지

Nuxt에선 index.html이 없기 때문에 nuxt.config에서 수정해주자

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
    },
  },
  ...
});

meta에 viewport를 수정해주고

// app.vue
<script lang="ts" setup>
  onMounted(() => {
    document.documentElement.addEventListener(
      "touchstart",
      function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      },
      false
    );

    var lastTouchEnd = 0;

    document.documentElement.addEventListener(
      "touchend",
      function (event) {
        var now = new Date().getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      },
      false
    );
  });
</script>

후에 app.vue에 추가해주자