How to create a Detection System to Detect Screen Sizes?

Ask the community
,
1

So I am currently trying to develop for my website a way to detect if the user has shrunk screen-sizes (desktop only), is there a way for wix code to detect if they screen size has shrunk and automatically update certain objects to become collapsed or hidden if the screen is shrunk at all?

Currently this is what I am trying to do.
if (wixWindow <= 948) {
if ((‘#anchorMenu1’).collapsed() !== false ) {
$w(‘#anchorMenu1’).collapse();
//Expand Page elements…
}
} else if (wixWindow <= 1280) {
if ((‘#anchorMenu1’).collapsed() !== false ) {
$w(‘#anchorMenu1’).collapse();
//Expand Page elements…
}
} else if (wixWindow > 1280) {
if ((‘#anchorMenu1’).collapsed()) {
$w(‘#anchorMenu1’).expand();
//Expand Page elements…
}
}

Essentially collapsing the anchorMenu so it doesn’t collide with other objects on screen? Anyone have a work around for this?

2

Hi Cameron:

I think the answer for you is to use the wixWindow.getBoundingRect() function. This will get you the current window’s size, the document’s size, and the current scroll position.

Per the documentation example:

import wixWindow from 'wix-window';

// ...

wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
    let windowHeight = windowSizeInfo.window.height;      // 565
    let windowWidth = windowSizeInfo.window.width;        // 1269
    let documentHeight = windowSizeInfo.document.height;  // 780
    let documentWidth = windowSizeInfo.document.width;    // 1269
    let scrollX = windowSizeInfo.scroll.x;                // 0
    let scrollY = windowSizeInfo.scroll.y;                // 120
  } );

Cheers
Steve