Native App Width

Need help
1

Emmanuel, what is the width and height of the bubble app (built on bubble itself)? Is there a preset page width?
I’m looking have a similar width/height for my native app.

Cheers!

2

You have a dropdown at the page level where you can pick some preset widths. For mobile we put 380px (and that’s what we did for our own app), but it’s really up to you actually (and easy to test, just start building and load the page on your phone).

1 Like
3

Or use something like …

http://mobiletest.me/

To check on various sizes if you have a particularly big one !

2 Likes
4

Thanks Emmanuel!

5

I tried doing this recently and it seemed to work fine. but then I just tried again now and the width isn’t automattically re-sizing on my phone through the bubble app. Not sure if something has changed?

6

We didn’t change anything there. What are you seeing? Can you upload a screenshot?

7

So it’s ok to use 380 pixels or should we rebuild the app to follow the advice below ?

<img src="//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/bubble/original/1X/a42d92efa965b80aa0642ec2e8912a0354bb1319.png" width="625" height="500">
8

380 should be fine. Have you tested?

9

We have test the app with an iphone and it looks fine

10

I’m using 380px as my width and testing with the bubble iOS app (all very cool, by the way). As I hide/show groups with content of various heights, content that I’d like to appear “off canvas” are instead shown. This results in the canvas shrinking horizontally. The space leftover is just black.

It seems to work fine when tested on a browser. But as a native app (testing with the bubble iOS app), I can’t get the width and height to play nice.

Here are some screenshots:

Pasted image411×2923 85.7 KB

I’d like the viewport with to remain at 380 (or whatever correct width uses the device’s full width). And if any content is lower than the expected height, a user can just scroll down to see it.

Note: If I set the index height to 550px (380x550), it looks fine, so long as there isn’t more content than vertical space. But I’d like to give users the ability to scroll down for more.

11

Sorry for the delay…I think that’s just how it looks with the bubble app.
You may want to send an email to bubble about this.

1 Like
12

@emmanuel

Hey Emmanuel. I know the recommended dimension for native app is 640 - 320.

But I notice that on my phone (iPhone 4S) that size will not fill in the full width of my screen. I see that with the Bubble app as well.

Will the screen size be reconfigured for different iPhone screens; once the app gets compiled? Other then that I am kind of confused as to what dimensions would be best…

13

We use a viewport so it should scale automatically (but there might be some glitches for different screen sizes, we have’t tested on old phones for instance. that’ll be for when we get out of beta).

1 Like
14

Thanks @TobyCargo. I’ve tested the app in testflight and the issue remains, so I don’t think the issue is specific to the Bubble app environment alone.

I’ve emailed bubble support and they’ve been very, very helpful. Just adding this note here, in case anyone else comes across a similar issue.

Thanks!

@TobyCargo, I take back what I said above! I had forgotten to adjust app index height again, but testing on iOS with testflight, it seems like the canvas width issues are no longer a problem? Fingers crossed, but I think the issue is specific to testing within the Bubble iOS app alone.

Please no jinx, please no jinx, please no jinx

1 Like
15

Unfortunately, the canvas width issue continued after more testing with the native app. However, when I edited the phone gap config.xml file from:

<preference name="EnableViewportScale" value="true" />

to

<preference name="EnableViewportScale" value="false" />

The issue appears (for now) to be resolved

2 Likes