Wix-window formFactor not working?

Ask the community
,
1

HELP! the following code retrieves the same device “Desktop” when viewing the site on my laptop, the Editor Preview and my iPhone 6 ( all devices using Chrome ). I need my page to hide elements when viewed on mobile and if I hide the elements in the Mobile Editor all my code breaks as it tries to reference elements that are not there (this also happened with the horizontal menu… had to recreate it with buttons as the menu disappears from the mobile editor).

Is there something wrong with the function or is it my code?

import wixWindow from 'wix-window';
let formFactor = wixWindow.formFactor; // "Mobile" or "Desktop"
if (formFactor === "Mobile") {
		console.log(formFactor);
		$w('#logoHeader').show();
		$w('#logoHeaderBW').hide();
		$w('#menuHeader').hide();
		$w('#menuHeaderGroup').hide();
		$w('#menuHeaderCloseGroup').hide();
	}
2

Hey
You can’t hide elements on mobile in the editor because then they are not present in the DOM and they will break the code. How do you test the console log in the mobile device? The formfactor should work as you coded as long as the objects are present on the page and in the DOM.

3

Hey Andreas, I included the console log to see if the mobile editor showed something different (it doesn’t). I know it’s not working on mobile because I assigned the formFactor variable to a text element an de it says “Desktop” when viewed on my mobile.

Wix Wizards! Help :slight_smile:

4

Hey,
When you hide an element, it still exists in the DOM, it’s just not visible . Therefore, I’m not sure that I fully understand what you were referring by saying that the code breaks as it tries to reference elements that are not there. Moreover, note that you can also hide element on mobile editor without using code as explained here .

If this does not resolve the issue, please provide us with the site URL so that we can have a look.

Best,
Tal.

5

Hi Tal

hope you’re doing fine.
im trying to use formFactor to to control table size on mobile/ destop.
Does formFactor work on mobile editor preview?

when i use mobile preview the form factor is still " Desktop".
im not coder so correct mine if needed.

let formFactor = wixWindow.formFactor;
if (formFactor === ‘Mobile’) {
$w(‘#table1’).hide()
$w(‘#table2’).show()
}
else if (formFactor === ‘Desktop’) {
$w(‘#table1’).show()
$w(‘#table2’).hide()
}

wixWindow is imported and it is onReady function.
thanks in advance
DA

6

Hi Tal

I figured it out.
formFactor is working on Live mobile.
dont know why not in mobile editor preview.

Thanks,
DA