Automatic phone screen size check and redirect?

Ask the community
,
1

Graphics don’t reposition on mobile screens of different heights (ie. iPhone 8 vs iPhone 12) so I’m trying to create a landing page which checks screen height and then redirects to a mobile page version with graphics appropriate for the size. I’ve found info on how to get the html component to return a message indicating height back to the page, but I have no idea how to make the returned info useable for my purposes.

I cut/pasted this code into the html component:

<!doctype html>

This was pasted into the page editor:

$w.onReady(function () { // when a message is received from the HTML Component $w(“#myHtmlComponent”).onMessage( (event) => { console.log(Screen resolution: height:${event.data.height}, width:${event.data.width} ); } ); } );

So now, how do I get the height information into a variable I can use in an “if/greater than” command?

This is definitely not working:

import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-window’ ;
$w . onReady ( function () {
// when a message is received from the HTML Component
$w ( “#myHtmlComponent” ). onMessage ( ( event ) => {
console . log ( Screen resolution: height: ${ event . data . height } , width: ${ event . data . width } );
} );

if ( wixWindow . formFactor === “Mobile” ){

if ( event . data . height > 800 ) {
wixLocation . to ( “/homeb” );
}
else
{ wixLocation . to ( “/home” )};
}
} );

Thanks for any help!