Make native pinch-to-zoom trigger real layout reflow (without horizontal scroll) on mobile

Question

I need the native pinch-to-zoom gesture in mobile browsers to behave like true browser zoom: when the user pinches, media queries should reevaluate and the layout should reflow. At the same time, the horizontal scroll must remain disabled (so the viewport width stays clamped).

The problem I’m facing:

• Pinch-to-zoom is treated as a magnifier in mobile browsers. The layout remains fixed; media queries don’t fire.

• Listening to visualViewport.resize and manually scaling elements makes them bigger, but still triggers horizontal scrolling.

• I can hack around this by setting html { position: fixed; }, intercepting pointer events, setting CSS variables, and forcing a custom reflow. However, I can only get it working if I disable vertical scrolling (overflow: hidden). The moment I allow vertical scroll, the native behaviour comes back.

• To keep the custom zoom, I have to block touch-action on the root element, which essentially disables native pinch. That seems like an accessibility violation (WCAG 1.4.4).

  So the question is:

  Does it make sense to ship such a custom pinch-to-zoom if the main goal is to keep the page accessible? Is there any supported way to trigger actual layout reflow without breaking native pinch gestures, or should I abandon the idea because it inherently conflicts with accessibility requirements?

Answer 1

Having the individual elements on my screen scale and then reflow just from zooming in seems on the surface like a very confusing user experience, without knowing what your end goal is. If your goal is just accessibility for an average webpage then I definitely would say it's not worth it. If it's more of a custom gesture-driven app you could look into using the canvas API.