2022-10-05 at 6:35 pm #56410
I need to refresh the page after the user changes the orientation of the mobile device. This needs to be done because the different interface is designed for landscape and portrait. I created the interface in Webflow.
I’m trying to do it with the script (the puzzle configuration is in the attachment):
but it reloads the html_embed window only (so only the Verge application), but the elements added via Webflow stay the same.
How should I configure this code to reload the whole page including the app embed and the Webflow elements?
Attachments:You must be logged in to view attached files.2022-10-05 at 9:03 pm #56418kdv77kdvParticipant
but it’s a cruel solution to reload the whole page: one awkward move and ooops ))) can’t you just hide/show interfaces on the window resizing?2022-10-06 at 6:59 am #56420
Thank you, it worked!
Yeah, I know. If I could, I would prefer to avoid refreshing the website. I have to do it for two reasons:
1. As mentioned above, when the user rotates the device, the interface made in Webflow still displays the version made for the previous orientation. And because those two versions are veeeeery different, it makes the application impossible to use.
2. Here is an even worse thing: the biggest smartphones have wider screens in landscape orientation than the smallest tablets in portrait. Since the breakpoints in Webflow depend on the screen resolution and not on the orientation, it results in smartphones in landscape orientation taking tablet interface which, again, makes it impossible to use. So I decided to add information like “rotate your device to use the application” after the page is reloaded. Probably I could do it without reloading the page on mobile, but on tablets, I still have problem no.1.
So yeah…2022-10-14 at 6:02 am #56626
I’ve just found a better solution to the problem that I had. I managed to display the “rotate the device window” message for the user when he rotates the mobile device to landscape and I want him to stay in portrait. It’s a kind of workaround. I’m leaving it here in case someone will need it in the future.
The reason for this workaround is that resizing the window from the example above was working also in a case where the user uses the “input” field to enter some text – the window was resized on mobile because the keyboard appeared and the website got refreshed, which was wrong in this situation.
To make the workaround:
1. We need to create a div with the message. In my setup, it has an ID “rotate device”.
2. We need to set up the procedure for checking the screen orientation (it was explained by Soft8Soft in a few places on the forum).
3. We need to set up “on event” for resizing the window.
- This reply was modified 1 month, 3 weeks ago by Mariusz.
Attachments:You must be logged in to view attached files.
- You must be logged in to reply to this topic.