Vue 3 (@vueuse/head) meta viewport only working on browser inspection mode

Question

I am trying to build a page where the meta viewport is set to shrink-to-fit=no. The reason of doing this is that I want my container to behave like an image when shrinking down the viewport size (font, position and everything should remains in smaller screen sizes)

I am able to do it with @vueuse/head, but it is only taking effect in browser inspection mode. When I am not in browser inspection mode, it behaves like the normal width=device-width, which is not intended.

<script>
import { useHead } from "@vueuse/head";

export default {
  mounted() {
    this.updateHead();
  },
  methods: {
    updateHead() {
      useHead({
        meta: [
          {
            name: "viewport",
            content: "shrink-to-fit=no",
          },
        ],
      });
    },
  },
};
</script>