When you build a site, Wix automatically creates a mobile version. Wix resizes your site's content to fit mobile screens and hides any elements from the desktop editor that aren't optimized for mobile. You can customize the mobile version of your site by:
Writing code to change the site’s behavior when a site visitor views it on a mobile device or tablet.
For example, you can show text on the desktop when hovering over an element. But this functionality is not available on a mobile device. Instead, you can show the text when tapping.
Managing elements in the Mobile Editor (Wix Editor) or by using breakpoints (Wix Studio).
For example, you can hide a button when a visitor opens the site on a mobile device or tablet. This doesn't require coding knowledge.
This article only discusses how to manage elements with code.
You can write code for mobile using:
To write code that only runs on mobile devices, you first need to check what device the code is running on. You do this by wrapping the mobile-only code in a JavaScript conditional statement with the wix-window-frontend API.
Your code will look something like this:
Consider the following when coding for mobile sites:
You might expect that code written in the code editor while in mobile view would only run when your site is viewed on a mobile device. However, the code actually runs regardless of the type of device on which your site is being viewed. Be sure this code doesn’t display anything unnecessary in desktop view.
Some event handlers, such as onMouseIn() or onMouseOut() don't work on mobile. You should replace these handlers with onClick(). For example:
Code for hovering an image in desktop view:
Code for tapping the same image in mobile view: