How to Prevent Zooming from Being Misinterpreted as Increasing Window Width?

newbie-question
#1

Hello, I am currently using Axure RP 10 to design a website with responsive properties. The interface I designed automatically adjusts the layout based on the window’s width. However, I encountered a problem when I tried to zoom in on the website: it seems that the site did not magnify my interface but misinterpreted it as increasing the window’s width.

My question is, is there any way through Axure RP’s settings to make the website correctly recognize that I am zooming in on the interface, not increasing the window width? I hope that when zooming in, the website can maintain the current layout without automatically adjusting.

Thank you very much for your help!

#2

How are you applying this flexible layout? I think we need more information in order to be helpful. Attaching a demonstrative sample that duplicates what you’re trying to do would help a lot.

It really comes down to what you mean by the word “zooming”, on what device type, on what input device?

on desktop you can “zoom” with Ctrl-+/- or Mouse Wheel, but on mobile that could mean zooming in with your fingers.

If you mean stopping mobile zooming in. You can apply a style block as a prototype plugin in Axure Cloud under the Advanced tab. That will disallow zooming entirely on mobile devices, it has no effect on desktop.

<style>
  html {
  touch-action: manipulation;
  -ms-content-zooming: none;
  user-zoom: fixed;
  touch-zooming: none;
}
</style>

I must admit I’m a bit flummoxed about what could even be going on here, I really want to see how it is you’re doing responsive design such that it’s firing updates on zoom in. I’ve never encountered that with responsive views but I don’t use them very often.