Desktop layout shown in IPad view port in real life test

Ask the community
, ,
1

Question:
Recently, I have done my responsive settings for three view ports as follows:

Desktop - 1920px
Tablet - 768px
Mobile - 390px

I have my code as follows to check the view port:

import wixWindowFrontend from "wix-window-frontend";
:
:

$w.onReady(function () {
    let formFactor = wixWindowFrontend.formFactor; 
    console.log(formFactor);

    :
    :
});

I run the site for three different view port mentioned above.

When I select Desktop view port and run the site, the console show “Desktop”.

When I select Tablet view port and run the site, the console show “Desktop”.
(Note: In Wix, the tablet layout is shown, which is correct. But when test with an iPad, the desktop layout is shown, which is wrong)

When I select Mobile view port and run the site, the console show “Mobile”.

My user have also tested with their iPad. When they open the site with a iPad, I expected the tablet layout should present to the user, but it is not working as expected. Instead of show the tablet layout, desktop layout is presented to the user.

From the code we just see, I suspect that there is a bug in view port detection. Or, will it be because I miss out some “important settings”? Could anyone give same advice for this issue?

Thanks in advance for your advice.

Product:
Note: I am using Wix Studio Editor for the site creation.

2

xxxxxxxxxx
On Wix, an iPad will typically display the desktop layout of your website because Wix considers tablets like iPads as “desktop” devices, meaning they will show the full desktop version of your site instead of automatically switching to a mobile-optimized view like on smaller smartphones; this is a standard feature of the platform, not a bug.
xxxxxxxxxx

Above is the information I just got from Google.

But now, when my desktop layout shown in a IPad, the elements overlapping each other. It is something like the lefthand side of right element 20px overlap the righthand side of the left element. May I know how I can fix this issue?

3

Hi, @Wong_Jack !!

First, place #textElement on the page, then check the page on an iPad after inserting this code. It might reveal something, as the width may be detected as larger than expected. :open_mouth:

import wixWindowFrontend from "wix-window-frontend";

wixWindowFrontend.getBoundingRect().then((windowSizeInfo) => {
    // Get the viewport width and height
    let viewportWidth = windowSizeInfo.window.width; // Viewport width
    let viewportHeight = windowSizeInfo.window.height; // Viewport height

    console.log(`iPad Viewport Width: ${viewportWidth}px`);
    console.log(`iPad Viewport Height: ${viewportHeight}px`);

    // Display the viewport directly on the page if needed
    $w("#textElement").text = `Viewport Width: ${viewportWidth}px, Viewport Height: ${viewportHeight}px`;
});
4

Thanks a lot @onemoretime! Let me try and see!