2

I've built my app using reactand styled-components. It's all client-side rendered and routed.

All my responsive layout is based on the window.innerWidth value and I do lots of:

const MyComponent_DIV = styled.div`
  width: ${props => props.isMobile ? "200px" : "400px"};
`;

const [windowWidth,setWindowWidth] = useState(window.innerWidth);

... some code

return (
  <MyComponent_DIV
    isMobile={windowWidth <= 768}
  />
);

NOTE: I also attach a resize event listener, so my app is responsive to resize events. So far so good.

function handleResize() {
  console.log("FROM RESIZE: " + window.innerWidth);  // I CAN SEE THIS VALUE CHANGING WHEN ZOOMING IN AND OUT
  setWindowWidth(window.innerWidth);
}

But the weird thing, at least to me, is when I found out that changing the browser ZOOM level (on desktop and mobile) affects the window.innerWidth value. And it also fires the resize event.

What I'm trying to accomplish:

  • Be responsive to resize events, but not to "ZOOM events"
  • When user changes the zoom level, I want my layout to remain the same and show scroll bar when zoomed in.
  • Basically I want the zoom to work normally like a zoom and not trigger a re-render on my app.

EXTRA:

This is my meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, shrink-to-fit=no">

QUESTION

Does it make sense for the zoom event to change the window.innerWidth property? I mean, isn't that completely counter intuitive?

How can I avoid it, or at least, do some workaround for my app to behave the way I need?

cbdeveloper
  • 14,014
  • 11
  • 57
  • 145
  • This question ["How to detect page zoom level in all modern browsers?"](https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers) is somehow related and there does not seem to be a production-grade cross-browser solution to this problem yet. I might need to disable my `resize` event listener. – cbdeveloper Jan 13 '20 at 16:36

0 Answers0