Disable mobile browser Scaling a single HTML element

Question

I am wondering if anyone knows how to prevent browser scaling of certain page elements.

This is for the mobile version of the site that I am developing. I have a fixed menu bar that runs the full width of the site and always stays at the top of the page to provide navigation. I have optimized the size of buttons / text for working with touch screens and do not want this to be affected if the user zooms in on the page content.

The only thing I came across was the following CSS, but it doesn't seem to work when I tried: -webkit-text-size-adjust: none;

I don’t want to disable the resizing of the whole page using the Viewport meta tag, I just want to target the menu bar html elements.

Answer 1

The scaling mechanism varies across browsers and is not standardized, and it is not scriptable. Any solution would be quite confusing to work in browsers. There is no easy way to do this.

Answer 2

I wrote a modal dialogue based on a similar question, you can find it here .

Essentially, the logic is to get the page scale ratio based on window.innerWidth and the maximum page width, applying it as a CSS transform to an element, and then moving it around the screen. If there is interest, I copied it to a library that takes only a position: a fixed element as input and does all this magic when the user zooms in on the page.