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
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.
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.
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.
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.
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.
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
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.
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