Velo: Writing Code That Only Runs on Mobile Devices

Sometimes you want certain code to run only when your site is being viewed on a mobile device. To do so, you'll need to wrap that code in a JavaScript conditional statement that checks the type of device the code is currently running on as described below.

Code Editor

You might expect that code you write in the code editor when in mobile view only runs when your site is viewed on a mobile device. However, the code you write in the code editor actually runs regardless of the type of device your site is being viewed on.  

Properties & Events Panel

The Properties & Events panel in the editor is the same for all devices. Therefore, if you add an event handler, such as an onClick for a button, that event handler will run regardless of the type of device your site is being viewed on.  

Mobile Code

As mentioned above, to write code that only runs on mobile devices, you'll need to wrap that code in a JavaScript conditional statement that checks the type of device the code is currently running on.

To check the current device type in code, you need to first import the wix-window-frontend API. Remember, import statements go all the way at the top of your page code. 

1
import wixWindowFrontend from 'wix-window-frontend';

Then you need to wrap your code in a conditional statement that checks the device type. 

1
if(wixWindowFrontend.formFactor === "Mobile"){
2
  // code that will only run on mobile
3
}

Example

For example, let's say you have an image on your page and some hidden text. When viewed on a desktop device, you want the hidden text to show when visitors hover over the image and disappear when they are no longer hovering over the image. But on mobile devices, since there is no concept of hovering, you want the hidden text to show when visitors click on the image and disappear when they click again.

So, in our example, we have the following elements on the page:

We begin by setting the hiddenText element to Hidden using the Properties & Events panel.

Remember that whatever you do in the Properties & Events panel affects what happens when your site is viewed on both desktop and mobile devices. In our case, we want the text to load as hidden on all devices, so no further action is needed.

Next, we use the Properties & Events panel to add three event handlers to the image element. The onMouseIn and onMouseOut events are used for desktop devices. The onClick event is used for mobile devices.

As mentioned above, we need to first import the wix-window-frontend API.

1
import wixWindowFrontend from 'wix-window-frontend';

Now, we write the code for the event handlers.

In the mouseIn event handler, we write a line of code that shows the hidden text element. In the mouseOut event handler, we write a line of code that hides the text element. 

1
export function image_mouseIn(event) {
2
  $w('#hiddenText').show("fade");
3
}
4

5
export function image_mouseOut(event) {
6
  $w('#hiddenText').hide("fade");
7
}

Since the mouseIn and mouseOut events are never fired on mobile devices, we need a different way to show and hide the text on those devices. That's what we use the onClick event handler for.

In the onClick event handler, we toggle whether the text element is hidden or shown. Since we only want this to happen on mobile devices, we wrap the toggle code inside a conditional that checks the device type. Because hovering doesn't apply to phones as well as tablets, we use an or (||) to test for both cases.

1
export function image_click(event) {
2
  if(wixWindowFrontend.formFactor === "Mobile" || wixWindowFrontend.formFactor === "Tablet"){
3
    if($w('#hiddenText').hidden){
4
      $w('#hiddenText').show("fade");
5
    }
6
    else{
7
      $w('#hiddenText').hide("fade");
8
    }
9
  } 
10
}

Testing

If you want to test how your code works on mobile devices, you'll need to publish your site and view the published version on a mobile device or in a mobile device emulator. 

To test your site on a desktop machine as if it is being viewed on a mobile device:

1. Publish your site.
2. View the published site.
3. Open your browser's developer tools.
4. Use your browser's developer tools to emulate a mobile device. (This is usually called something like Toggle device toolbar or Responsive Design Mode and turned on using an icon similar to this ).
5. Refresh the page so your site now loads as if it were on a mobile device.