How to make Auto Zoom stop on Mobile (iOS) when using Input

If the input font size is less than 16px your page will automatically be zoomed in when the user on mobile iOS device click into the input, which does not automatically zoom out after they finish inputting the values. This causes the user to have to adjust their page to get it back to normal.

Fix is easy, make sure the input element font size is 16px or greater…no more auto zoom

7 Likes

Or you can simply check this option in you Bubble Settings → General tab

1 Like

that’s a bad idea on so many levels. try googling “accessibility prevent zoom”, even webflow will tell you it’s a bad idea

People with partial vision and low vision enlarge text to make it more readable. Using user-scalable=”no” in the <meta name=”viewport” element blocks people from resizing text, and ultimately from using your site.

setting the right font size is so easy

3 Likes

It does make you wonder why the default font size for input elements isn’t 16px. Every Bubble dev has probably stumbled upon this when they have a concern for mobile design. Maybe this forces you to learn why it’s important.

1 Like

I believe that makes it not possible to pinch zoom when a user wants to zoom. My goal was to stop auto zoom on input focus.

Hey @boston85719 ! No, you still be able to pinch zoom!

1 Like

You still can zoom manually. Did you tried?

1 Like

I was basing my statement on Bubble documentation and not experience

I’d imagine if this box is checked and the user is still able to pinch zoom, then there is a bug as that doesn’t match with their description of the feature from the manual…after reading that closer, it doesn’t work for safari, so not on iOS devices…I guess that means on the majority of mobile devices it does not work, which would mean they could still zoom with fingers (pinch zoom) and the auto zoom for input with font size less than 14px would still occur.

2 Likes

@dorilama @rpetribu @rjwilkinson10 as a side note…this makes me laugh

I had an iPhone 5 from 2012 until 2020. Not sure how many iPhone 5 users got that much use from theirs, but also curious if there are still any in use at all.

2 Likes

:face_with_monocle: :thinking:

This is really odd! I always thought this feature was made exactly for the input problem. Because I always used it in my applications for this purpose.

I double checked here and the option is checked in all my apps and I am still able to pinch zoom… But indeed, the input issue stopped.

I will try with other browsers… I am using Safari.

Still able to zoom in Chrome :man_shrugging:
And the automatic zoom is still blocked…

Everything working fine :shushing_face:
Don’t tell Bubble to fix it please :rofl:

1 Like

never tried because the checkbox says “prevent the user from zooming” and I don’t want that.
It’s interesting that your experience is a different behaviour, I’ll try it as soon as I get back to my pc :slight_smile:

1 Like

I achieved this desired behaviour using Meta tags under SEO/ Metatags. Add this to th eheader.

Now when you click on an input such as a text box it will not zoom into that box or area.

Add what to the header?

sorry text did not paste properly.

1 Like

user-scalable Controls whether zoom in and zoom out actions are allowed on the page.
Setting the value to 0, which is the same as no, is against Web Content Accessibility Guidelines (WCAG).

Just tried this option (“prevent user from zooming”) and it is exactly as I always thought: it adds user-scalable=no to the viewport meta tag.
this can cause accessibility issues so I’ll keep setting the right minimum font size on inputs instead.

1 Like

This is odd… in all my apps I still can pinch zoom without any problem
Only the “automatic input zoom” was blocked. And I use font size = 14px.

quick test on firefox and chrome on android: setting “prevent user from zooming” prevents pinch zoom on the page, so it’s bad for accessibility. It is what it is :upside_down_face: