iphone zooms on input field click nuxt ui
Hi im using nuxt ui to make my site and im testing it on my phone currently and the default input fields when clicked cause my iphone to zoom my screen in onto it. is this standard or is there a way to prevent it from happening?
12 Replies
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not contain information about preventing iPhone zoom on input fields when using Nuxt UI. The documentation covers usage, customization, and examples of input components, but does not address mobile browser zoom behavior or how to prevent it specifically on iOS devices. If you need further assistance, you may want to consult general web development resources or the official Nuxt UI community for advice.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
On this topic you should really familiarize yourself with the viewport meta tag. This tag applies to all webpages, regardless of framework, and ultimately can dictate the of page zoom that can occur (assuming you have nothing else at play that happens to scale things).
https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element
In my Nuxt/NuxtUI app, using NuxtUI input fields, on iPhone when clicking the input fields, the page does no zooming not does any element scale. The only thing that happens is the native keyboard slides up as expected.
oh interesting, even the official nuxt ui page on my phone causes the same zoom in behaviour when clicking an input field. What size input fields do you use and what phone? From what I read apparently if the text is at least 16px then mobile browsers won't zoom in and if the text is based on rem it's possible my iphone 12 mini is rendering it below 16px. as on my larger samsung galaxy s21 I guess it renders it above 16px so it doesn't zoom. So I suppose we just can't do anything for small phones other than changing input fields to be larger so the text is above 16px, even though the current sized ones are easily readable
Hey, I take back what I said, and the "zoom in" effect does happen on my site.
It was so subtle I never noticed it.
Now I'm annoyed too, lol.
I'm adding this to my list and will figure it out.
IMHO, this is iOS/Safari BS, so blame should be directed there.
Ok so this fixes the zoom-on-iOS-when-clicking-input-field:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
However, with this the user can still pinch-to-zoom the page... which I think is still desirable.
Font-size is a factor too it seems. If the font size is 16px-and-up, there would never be a zoom issue to begin with.
Personally I think my fields are too small anyways.ah legend, that fixed it for me too. it was like a 2cm zoom in on my iphone 12 mini so definitely noticeable lol
This solution isn’t good for accessibility. Anything under 16px is actually difficult for people to read (this isn’t a bug on IOS) rather a decision. Probably better just to make font size 16px. You can do this easily by overiting using app.config.ts the font size for the size you require. There are tons of articles about this online and tailwind plugins that try solve this in most user friendly and accessible out friendly way.
yeah I think you're right, I'll do more testing as it looked big enough for me on my iphone 12 mini but maybe not for everyone. But it's good to know there's a solution incase i go that route
cc @HugoRCD just in case the default is too small
Would you mind opening an issue on https://github.com/nuxt/ui/issues ? It might be worth changing the default font on mobile to avoid that
GitHub
Issues · nuxt/ui
The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - Issues · nuxt/ui
sure ill do it now
Thanks 😊