Why knowing iPad or tablet is extremly important

Questions
1

Here is why I think this feature is critical for Bubble app development.

Bubble gives you the option to create an alternative page for mobile but this works only for phones. For iPads or tablets it uses the “desktop version”. The problem manifest itself in two important areas:

  1. Element behavior. For example if you have roll-over actions in your desktop (mouse action), then this is perfectly fine. But these roll-over behaviours will not work in a touch-only device like the iPad. And there is no value you can query to find out if you are in an iPad or tablet device. Reacting to screen width is also a lost cause, as some tablet dimensions are comparable to desktop dimensions.

  2. Plug in behavior: For example the Stripe plug reacts on an iPad as if was on a mobile device, but Bubble won’t, instead reacting like a desktop device. If you want to have a page designed differently for mobile you can’t. You end up having a desktop design for iPad paradoxically with a mobile action in Stripe itself. On an iPhone this is fine.

I don’t know the reason the user-agent string is not available to Bubble developer or if there are a complexities towards implementing it. However, I do think, that it is critical to know via conditionals what you are dealing with, so your design and behavior match and are consistent.

These are just my observations. Please correct me if I am wrong. I believe this was, at one point, in the Bubble plans but have not seen anything relative to the subject since.

Any thoughts?
Thanks…

2

Jarrad was kind enough to provide a fantastic solution via an update to his CSS plug in.

See PlugBubble - Plugins, Updates & General Goodies

Simple implementation instructions example userAgent (draft):

GET THE ELEMENT:
Drop the CSSTools element from the Visual Element on the left of your editor onto your page
Assign any user unique ID in the Unique ID field

ADD A WORKFLOW:
On the page load add a work flow Element Action: Get Browser Info and select Your CSSTools Element name

USE LIKE THiS:
You can now refer to element as follows Your CSSTools Element name’s userAgent for example in a Workflow element: Only when: My CSSTools’s userAgent Contains ‘iPad’ then…

2 Likes