Can I have my fixed button remain at a fixed size when zooming in mobile?

Question

_{None of the questions on the subject has any real answer (I've seen one that says "Just stop the zoom altogether!" and the other that says "Set the width!" (which isn't the case))}

I have a web application that's supposed to work on mobile (Mobile Chrome only is enough). Pinch-to-zoom is a must-have feature.

It all works well, except for the control buttons I have. Standard buttons, fixed position at the bottom left of the page.

When I pinch-to-zoom, those buttons, while remain on bottom left, grow along with the zoom.

Is it possible to have those buttons not grow by zoom somehow?

Answer 1

Here is a potential fix and good read if you are running into this problem.

Here is the website, css fixed position.

How my prototype works

What I’m doing is calculating the zoom level (poorly) with JavaScript and then applying CSS transforms to scale the fixed element back down to normal size. As you might expect there is no smooth transition during zoom. There are a whole host of bugs and edge cases. I’ve not even attempted cross browser support (hence no code).

This does not seem to provide a script but it gives you the idea of what to do and how to accomplish it.

Another link on this site seems to have a bunch of great info about your problem, more of a proposal.

Here is the website, position: device-fixed;

The only other option I currently know of is disabling zoom. This is not the best approach but is what I currently do if a mobile design needs a fixed header. This will prevent the user from zooming which will then prevent the element to be affected.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">