Mobile... Portrait or Landscape

Ask the community
,
1

Is there a way to be able to know whether the user turns there screen from portrait to landscape or vice-versa. I am currently using this code

$w.onReady( function () {

let formFactor = wixWindow.formFactor; // “Mobile”
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let windowHeight = windowSizeInfo.window.height; // 565
let windowWidth = windowSizeInfo.window.width; // 1269
} );
}

Data can be gathered on page load whether the user is using a mobile and whether the user is viewing in portrait or landscape (depending on whether height>width).

However, when the user changes from portrait<–>landscape, these results do not change.

I would like to have a solution where as soon as the change from portrait<–>landscape happens, the data changes.

Thanks : )

2

Add a invisible box and pin it to the bottom, trigger onViewPortEnter and leave. I think that will trigger when you Switch because it will go out from screen long enough to trigger.

3

Thanks @andreas-kviby
I used this idea and placed the code needed on several items’ viewPortEnter and Leave.

: )

4

If it did work please mark my answer top comment as it helps me here

5

Trying to implement this, but there is no way I can see to pin elements in the mobile editor?

6

How did you manage to pin the box in mobile please?

7

@aquacruise
https://support.wix.com/en/article/pinned-elements-in-the-mobile-editor

8

@givemeawhisky Many thanks for this, but the link you posted states " Note:
Pinned elements in the mobile Editor can be unhidden but are no longer pinned on your mobile site." So therefore the solution proposed by Andreas Kviby in this thread cannot work. I think the only solution is to poll the screen using setInterval or something similar…

9

@aquacruise
Yes that is a no go then, have a look at Idan’s reply here in a previous post about using the Wix Quick Action Bar and see if it is any good for you.
https://www.wix.com/corvid/forum/community-feature-request/pinned-elements-on-mobile-site

If that doesn’t work for you then until Wix let you pin to mobile, this will be a dead end.

The only other workaround I can think of for you is to see if you can use Wix Window and it’s formfactor function so that an element only shows on mobile.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

Then you can see if you can do something with the required element with an event handler that forces the element to scroll down when the page is viewed etc.

10

@givemeawhisky Thanks again. What I’ve gone for in the end is a compromised solution (since have investigated stats, it appears that only around 9% of smart phone users browse in landscape). Solution as follows:

Thanks again. What I’ve gone for in the end is a compromised solution (since have investigated stats, it appears that only around 9% of

$w.onReady(function () {
    if (wixWindow.formFactor === "Mobile") {
    // MOBILE code here
    mobileLandscapeCheck()
    } 
})

export function mobileLandscapeCheck() {
    setTimeout(() => {
        wixWindow.getBoundingRect().then((sizeInfo) => {
        let mobileHeight = sizeInfo.window.height
        let mobileWidth = sizeInfo.window.width
        if (mobileWidth > mobileHeight) {
            if (!($w('#quickActionBar1').collapsed)) $w('#quickActionBar1').collapse()
            } else {
                if ($w('#quickActionBar1').collapsed) $w('#quickActionBar1').expand()
            }
        })
    }, 150)
}
export function mobileLogo_viewportEnter(event) {
    mobileLandscapeCheck()
}
export function mobileLogo_viewportLeave(event) {
    mobileLandscapeCheck()
}

So what it does is check to see if we are in landscape on load (width>height) which covers the case when the user first arrives (so we collapse the quickactionbar in order to maximise screen size). Then we’ve also got a check when the logo in the header leaves the viewport (which happens when the user scrolls, since I’ve got the header to auto hide on scroll) which is better than constantly polling with setInterval IMO. This works fine for me.

1 Like
11

@aquacruise
If this workaround works fine for you then great and well done for getting it to work, just be much easier for you if Wix enabled pin to screen on mobile.