Use formFactor to adapt your site for mobile

Show and tell
,
1

You can use the wix-window formFactor property to adjust your site visitor’s experience depending on whether they’re viewing your site from a desktop, tablet, or mobile device.

For example, let’s say you want to use one button style for desktop & tablet, and a different button style for mobile. You can do the following:

Set both buttons as hidden on load in the Properties panel .
Then add the following code to your page:

$w.onReady(function () { 
  if(wixWindow.formFactor === "Mobile") { 
    $w("#mobileButton").show(); 
  } else {
    $w("#desktopButton").show(); 
  }
});

If you want to provide a mobile-friendly experience for an entire page, you can direct visitors to a different page if they’re on a mobile device. For example:

import wixLocation from 'wix-location'; 
import wixWindow from 'wix-window'; 
 
$w.onReady(function () { 
  if(wixWindow.formFactor === "Mobile") { 
    wixLocation.to("/myMobilePage"); 
  }
});

Make sure the mobile-only pages are hidden from your desktop menu and vice-versa.

If you want to provide a completely responsive experience for your site visitors as they change their screen size, check out Editor X (Beta), Wix’s new responsive editor.

1 Like