Autozoom iOS input fields

[KayJay89]

Hi guys,

I've been trying to get myself familiar with this framework and I must say it is quite nice. I'm currently trying to add an input field to my page and on mobile (iOS - have no Android or others at my disposal to try) I have this little annoying quirk where my safari/firefox/chrome browser automatically zooms in on the text field hereby moving a lot of text out of the viewport.

I have tried the different input fields on the doc page and even the search bar on the top of the naiveui.com homepage and this behaviour is not happening there. I am wondering if I am doing something wrong or I should be including something else other than a simple <n-input ...>.

<template>
  <h1>News</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique harum
    eaque ullam. Fugit, nobis itaque! Laborum minima vero cupiditate nobis in
    similique facere, aliquam earum et sit voluptatum soluta commodi.
  </p>

  <n-input type="text" placeholder="Content is clearable" clearable />
</template>

<script>
import { NInput } from "naive-ui";
import { defineComponent } from "vue";

export default defineComponent({
  name: "News",
  components: { NInput },
});
</script>

It's a small thing but incredibly annoying for me personally. And as I do not have this behaviour when browsing on my mobile device through the naiveui website I'm sure I am doing something wrong.

[07akioni]

https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone