search

renatorib / react-sizes

:left_right_arrow: Hoc to easily map window sizes to props.
722 stars 36 forks source link

window.innerWidth/innerHeight are incorrect ways to determine available document sizes #32

Open matthew-dean opened 5 years ago

matthew-dean commented 5 years ago

I was using react-sizes to replace some media query stuff, and got some strange behaviors when zooming on iOS. e.g. it would eventually re-render with new sizes even though my device was the same. Like, if I scrolled the page, it would re-render.

The reason: window.innerWidth / innerHeight does not give the document width / height (which is what is useful for components in doing media-query-like stuff in JS), it gives the viewport width. However, pinching / zooming does not fire any sort of event, so basically react-sizes was changing props sort of at random, to values which broke layout.

Instead, this should be using document.documentElement.clientHeight/clientWidth, so that values do not change (eventually) after zooming into the document.

matthew-dean commented 5 years ago

Hmm never mind, document.documentElement.clientHeight doesn't seem to be correct either at providing the viewport size......

bitworking commented 5 years ago

Why not just use https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia?

matthew-dean commented 5 years ago

@bitworking I got rid of react-sizes and did just that. 🤷‍♂️