Javascript 如何获得相同的window.innerWidth，而不考虑缩放级别，从而使我的响应布局赢得'；缩放时不改变吗？

我使用

react

和

样式化组件构建了我的应用程序。它都是客户端渲染和路由的

我所有的响应布局都基于
窗口。innerWidth
值，我做了很多：

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}
  />
);

但奇怪的是，至少对我来说，当我发现更改浏览器缩放级别（在桌面和移动设备上）会影响
窗口.innerWidth
值。并触发
调整大小
事件时

我正在努力实现的目标：


响应调整大小事件，但不响应“缩放事件”
当用户更改缩放级别时，我希望我的布局保持不变，并在放大时显示滚动条
基本上，我希望缩放像缩放一样正常工作，而不是在我的应用程序上触发重新渲染

额外：

这是我的元视口标记：

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



问题

缩放事件更改
window.innerWidth
属性是否有意义？我是说，这不是完全违反直觉吗

我怎样才能避免它，或者至少为我的应用程序做一些变通，使其按我需要的方式运行？
这个问题在某种程度上是相关的，似乎还没有一个生产级的跨浏览器解决方案来解决这个问题。我可能需要禁用我的
调整大小
事件侦听器。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, shrink-to-fit=no">