I have my mobile page set to the default mobile dimensions of 380 X 589. When viewing my native app, it seems as if the screen is too wide for a standard iPhone 6. Some of the pixels are off the screen, and require horizontal scrolling. Any suggestions?
I’ve encountered this as well when viewing a native app in the Bubble app. I’ve just been using a web browser to view my app instead. It seems that the Bubble app doesn’t auto adjust width to your phone’s screen. From what I understand, this will no longer be an issue once you submit to the app store.
@natedogg thanks for the note. I don’t care if the dev dimensions are a little wonky, as long as the dimensions are proper in the app store. It sounds like you haven’t yet submitted your app. Can anybody else confirm the dimensions adjust properly once live?
@csblack I just downloaded the .ipa file of my app to my phone to test it. Same issue. Screen is too wide for my iPhone 6S. Not sure how to fix it. 
Dayum. That kinda makes mobile dev all for naught until responsive is a feature.
@natedogg do you know if mobile height matters? I would like to put more content than I can fit into the standard mobile height. If I extend the height, this causes an issue in the mobile previewer when opened as a native app. Any experience here?
@csblack I don’t know currently if the height is a big part of it, but I’ll probably play around with it later tonight. I’ll let you know if I figure anything out.
Id be interested to see how this goes for you as well.
I have found myself in a situation where I would like to exceed the recommended 640 height - but am trying to design my mobile site in a way so that it is the same as (and works for…) a native app…
Cheers
After spending some time reading through phonegap’s documentation, I was able to figure it out! This will work once you’re ready to build your app into an .ipa file, so if you load your app in the Bubble Account app, you’ll still probably encounter the horizontal scrolling issue.
Once the Bubble team sends you a .zip file to upload to phonegap, open the index.html file using notepad or something. You’ll want to find the part of the code that starts with [meta name=“viewport”] and make sure that the entire section reads as following:
[meta name=“viewport” content=“user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi”]
(Make sure that you change the square brackets to angle brackets. The forum thinks that I’m trying to insert code into my post when I type angle brackets. 
)
If you need any help when attempting to do this, feel free to reach out!
12 Likes
Great! Thanks!
This was very helpful!
Having similar issue. Native resolution at 640x1136…device not scaling down in PhoneGap on iPhone 6. I tried the above code replacement but that didn’t fix it. Anyone have further success with this?
Thanks!
Is your page responsive?
No; though does “mobile” need to be checked under “Preset page width”?
I believe so, and iIf I’m not mistaken, I think you need to uncheck the fixed width checkbox.