Desktop version on mobile

On opening a page built using bubble on google chrome mobile (e.g. android phone), the page that opens is the desktop version even though I’ve defined the mobile version page in page properties. The issue doesnt occur with safari on iphone. Why is this so ?

Same thing: email us with with the particular phone you’re using. On my iPhone it works fine on chrome.

Seeing the same issue on a Samsung Galaxy 5 using Chrome. Can get around it by appending the name of mobile page to the URL. Any progress on resolving this?

not really, it has to happen server side. We’re looking into it, the open source package we’re using for device recognition does indeed return weird results with larger Samsung phones

Was this issue with open source package fixed?

Bumping this up, since I’ve got the same problem.

I built two versions of my index page: regular (index) and mobile (index-mobile). For a number of reasons, it was a more convenient thing to do than building one responsive page for both. (Bubble’s lack of ability to define multiple breakpoints for each element in responsive mode makes it really hard to go fancy with responsive layouts, IMO.) Now I’ve got the same problem @gaurav, @Trustlii, and @CapiBalid did - when I open the page on mobile devices (tried on a few), they all show index, not index-mobile. (Has any of you guys found any solution to this?)

@emmanuel Any news on the fix? Thanks!

Oh, one more thing… I don’t know whether this is a useful bit of information or not, but I’m talking about the development version. The app hasn’t been published to live yet.

Hm, now it works on my iPhone, but it still doesn’t on my iPad… :thinking: Those DO count as mobile devices, right?

I have the same exact question, i.e. how does Bubble determine “mobile version”? From the reference:

Mobile version

To have a specific design for the page when loaded on a mobile device, select a page from this dropdown menu. Because the URL remains the same, this is transparent to the user.D

What counts as “mobile device”?

I’m planning to have two versions, mobile for 320-768 px width and larger screens starting from 769 px. If a user accesses the page using a 768 px wide tablet, will the mobile version be shown?

Any thoughts would be highly appreciated :raised_hands:

FWIW, I eventually gave up on using this feature altogether and redesigned the layout so it’s responsive.

Thanks for the update.

1 Like

I am still facing the same issue. The mobile version gets triggered on an iPhone 11 and in the browser’s mobile emulator, however, on both an iPad and a Samsung tablet it shows the desktop version. Unfortunately, it is a little bit too late for me to redo the design of all the pages in a responsive manner. Is there any way to set a custom resolution from which the mobile version gets triggered?

In my own opinion, you should not build and maintain 2 pages for the same contents, but différents resolution.

Instead, build your page in a responsive manner, with help of the conditional “when page width < xxx” in Workflow or for elements. It’s not so hard a’d you will decrease your maintenance efforts.

I never built any app using the “mobile page” feature, but as a workaround you could maybe redirect your users to the desktop page, and in the “page is loaded” Workflow you add a redirect to the mobile version of the page (go to when current page width < xxx"