Text Inputs Automatically zoom into it on Mobile

Is it possible to make it so that when you click on a text input (a dropdown menu does this as well) on mobile, it doesn’t automatically zoom in to that input? When that happens, the current page extends beyond the edges of the screen and it doesn’t return to normal when you click out of the input. So now the user has to try to pinch the screen to make it fit correctly. Pinching doesn’t always work, especially if you have something like a map where pinching and zooming is allowed. This is a bad user experience and not something you expect on a mobile app. Is this a setting that can be changed?

1 Like

Just try different font sizes for the input. If you have set a width of 380 px, set the font size at 20 and it won’t zoom in. :slight_smile:

5 Likes

How does font size affect this? My width is 750px

You probably need to use 38+ size fonts in your inputs. Check out @Diego’s post from a few months ago.

2 Likes

hmm, so currently the font size in my inputs is 22, which I guess from what you’re saying is too small. The thing is, I don’t want to make my fonts bigger, I want them the size they currently are. I want to know if there’s an option to disable the automatic zooming?

Thanks

I understand. The issue is that the automatic zooming is a device issue, not a Bubble issue. (I’m guessing you’re using an iOS device? It’s most common with those.) It happens when the device thinks the font is too small for the user to read, so it zooms in to make it readable.

There isn’t a setting in Bubble to disable it. The only way to fix it is to either bump up the size of your fonts or increase your app dimensions to compensate for the smaller fonts. (Option 1 is probably easier than re-sizing everything.)

1 Like

I see, that makes sense, and that’s what I was afraid of. Yes, I’m on iOS.

Did you mean that my second option is to decrease the page size? That way the font size I’ve chosen is bigger relative to the page size?

Thanks

go to Settings - metatags and check the box Prevent the user from zooming

2 Likes

Yes, sorry for the typo. Decreasing your page size would also do it. :smile:

For example, I tend to use a width of 640 for my mobile apps, and I have to make sure that all of my inputs are size 32 or larger.

Checking that box prevents the user from zooming in by pinching the screen, but doesn’t quite solve what the OP is looking for, as it’s a device issue.

OK cool, thanks! Maybe I’ll increase my font size then… :slight_smile:

Hey @Alexis :smiley:
Wow, lots of traction here :smiley:

I’ve had similar thoughts on a project recently. Actually, as I was wanting to have custom icon inputs (customized symbols and personalized emoticons/stickers)… I just designed my own keyboard. To do that, don’t use a ‘text input’… Just make a sneaky button that looks like a text input… (you can even pop in a fun looking pulsing cursor marker to call people to your input)… Then construct your keyboard… People’s phones wouldn’t even know they were typing text input.

I like the meta tweak in this thread. However, for my needs, a customized keyboard is gravy :smiley:

Toodles!

Sincerely,

Ashley

UPDATE:

  1. IOS Zooming prevention box is now in the GENERAL TAB :slight_smile:
  2. Said ZPB controls Android in addition to IOS.

Hi everyone,

I’m not able to find again the Prevent from zooming option in General Tab?
Do you still have it?

thanks
Matt

Hi @mattmazzega,

Apple deprecated this feature for UX reasons as Emmanuel mentioned in this thread: Disable screen zoom on mobile

1 Like

Thanks for the link !

Font size to 20 fixed the issue :slight_smile: awesome!

Thanks!

thank you for this!