Detect window resize

1

Hey there,
I've got my document set up to display a certain scene based on the browser size, it's working well:
if (window.innerWidth <= 899) {
hypeDocument.showSceneNamed('m');
}
else {
hypeDocument.showSceneNamed('d');
}

However, I'd like to also detect if the window has been resized to also change to the proper scene layout based on the browser size. How can I detect if the window size has been changed?
Thanks

2 
window.onresize = function(event) {
 
    // the window's size has changed, so do something here
}

You could copy the same code within the above function to add another 'listener' to that event.

1 Like
3

Daniels' suggestion is the most reasonable and on point. Just as a sidenote on this thread:
Most actually want container queries. There are some great thoughts on this topic found here:
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/ (not a suggestion just a read up as it is only a draft in the CSS working group).

1 Like
4

Thanks for the quick reply. I put this in the same javascript that the scene runs on load. Doesn't seem to be detecting resize. Should put this javascript somewhere else (in the head)