Dropdown zooming on mobile

Need help Responsiveness
1

I have a user that tells me when he clicks on a dropdown in his mobile web browser it zooms into the dropdown and he has to pinch to zoom out again (this doesnt happen on my mobile browser). Its not a huge problem but i thought i would try to fix the issue anyway. I tried setting a condition on the page that says something like “when DropdownA is not focused” zoom out or show full but these options are not available. is there a way to do this? Again its not imperative that i fix this i am just curious if it can be done. thanks!

2

That’s a native behavior from the mobile browser. It zooms when an input is focused. A good way to prevent this is to set the page so that it’s not zoomable on mobile. See https://bubble.io/reference#ApplicationSettings.ios_meta_tag_prevent_zoom

4 Likes
3

awesome thanks!

1 Like
4

Is this option still available? I can’t seem to find it and I am running into the same issue described here

Thanks!

5

I found a posting where it reads that this was deprecated by Apple.

Thanks!

6

Font size 20 pix and above on your labels will not zoom. Solved.

7

Thanks @keith! I also found that adding

<script>
document.addEventListener('touchmove',
    function(e) {
        e.preventDefault();
    }, {passive:false});

to the HTML of the page that will be the mobile page also inhibits zoom. However this has the disadvantage that it also disables scroll of the page, so it would only work if all your elements fit in a single page.

I will give it a try with font sizing.

1 Like
8

Just to follow up I noticed that 16 is enough to stop the automatic zoom on scroll bar.

Thanks for the tip @keith!

3 Likes
9

Yep, that’s probably enough… 20 is nice though to my eyes. It’s tricky!

(I do wish sometimes that Bubble had a Muse-like breakpoint system for doing radically different mobile layouts. That would be sweet.)

10

Hey guys. 2 years later this helped me out. Changed font from 14 to 16 and stopped this zoom on iPhone. Tks!