Recent iPads display website as both tablet and Desktop simultaneously.

Ask the community
,
1

Hey Guys,

Been developing a Wix site for my work and have come across an issue that I am not quite sure how to tackle.

iPads seem to load by default (Via Safari) the desktop version of a website, which is fine however when I am using code to only display certain elements in tablet, mobile and desktop this can become an issue as the iPad then loads both Tablet and Desktop assets which causes the website to look strange as it has overlapping assets etc.

Has anyone else come across this and do we have a solution?

I know alternatively I can remove the elements but ideally I would like to keep.

Some code I have used for ref:

// Dont display desktop buttons for tablets
if(wixWindow.formFactor === "Tablet"){
$w("#button6").collapse();
$w("#button2").collapse();
$w("#button3").collapse();
$w("#button4").collapse();
$w("#button5").collapse();
$w('#box1').collapse();
$w('#box2').collapse();
$w('#box3').collapse();
$w('#box4').collapse();
$w('#box5').collapse();

}
// Dont display tablet buttons for Desktop
else if (wixWindow.formFactor === "Desktop"){
$w("#button7").collapse();
$w("#button8").collapse();
$w("#button9").collapse();
$w("#button10").collapse();
$w("#button11").collapse();
$w('#box6').collapse();
$w('#box7').collapse();
$w('#box8').collapse();
$w('#box9').collapse();
$w('#box10').collapse();

} else if (wixWindow.formFactor === "Mobile"){
$w("#button7").collapse();
$w("#button8").collapse();
$w("#button9").collapse();
$w("#button10").collapse();
$w("#button11").collapse();
$w('#box6').collapse();
$w('#box7').collapse();
$w('#box8').collapse();
$w('#box9').collapse();
$w('#box10').collapse();
}

Thanks team.

2

Add your code for multiple devices as shown in this example here with the | | in your code for multiple devices (towards the bottom of the page).
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

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.

export function image_click(event) {
if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
if($w('#hiddenText').hidden){
$w('#hiddenText').show("fade");
}
else{
$w('#hiddenText').hide("fade");
} 
}
}
//Change devices and element id names to match yours obviously!//

Plus, note that iPads will display the desktop version.

3

Also, if you want it to happen as soon as your page is loaded, then wrap it up in your pages onReady function, something like this…

import wixWindow from 'wix-window';

$w.onReady(() => {
if (wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
if ($w('#hiddenText').hidden) {
$w('#hiddenText').show("fade");
} else {
$w('#hiddenText').hide("fade");
}
}
})
//Change devices and element id names to match yours obviously!//