@cho Okey so let`s try to fix this once and for all. 
I will include some input on custom styling in the end of this post that might be beneficial to other readers.
In the future provide screenshots or post video recordings here (if possible) so we can see the issues visually too, it might remove alot of back and forth explanations. (Recordit.co is good for simple recordings, it instantly generates a link for you to share)
I have a few suggestions that I`m sure will resolve your issue(s):
Suggestion one:
Do you have the cordova/phonegap configuration set to: ( target-device value=“handset” ) ? This should be set for iOS build so it does not use all the screen real estate on ipad. Using target-device value=“universal” might create such problems. In cordova it might be found in config.xml AS < preference name=“target-device” value=“handset” / >
Suggestion two:
In phonegap.plist (or cordova equivalent) set or change the following attribute to ( EnableViewportScale : NO )
Suggestion three:
- Set the following info for meta viewport
width=320, height=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=0.1
- Set EnableViewportScale to true in config.xml
- Set in config.xml
Suggestion four:
Remove ‘width=device-width, height=device-height’ from the meta viewport tag.
alternatively try replacing your viewport meta with this:
Alternate explanations for other users that might use xcode:
IF you are using xcode AND are testing in a simulator make sure you are cleaning the project with cmd+shift+k as there is strong caching of index.html which might prevent you from seeing your latest changes.
IF you are using xcode AND have set a storyboard as launch image, delete the xib file. It should resolve the issue. (Use launch image instead)
General about custom styling for devices, resolutions, retina etc. (CSS and media queries knowledge necessary):
1. Get a remote inspect tool
(Universal, free) Adobe edge inspect: https://creative.adobe.com/products/inspect
(RECOMMENDED Universal, paid) https://www.vanamco.com/ghostlab/
(Universal, free, requires some manual work/config) : https://people.apache.org/~pmuellr/weinre-docs/latest/
Android: https://developer.chrome.com/devtools/docs/remote-debugging
Safari (from Windows or Linux): https://github.com/google/ios-webkit-debug-proxy
Safari (on a Mac): http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html
2. Inspect your web-app
The easiest way is to inspect the web version of your app directly from your exported code running on a webserver (or in phonegap)
Store your resolved CSS overrides (you will not change the default CSS but specify overrides separately) in a file and decide if they should be applied to a specific device or resolution using media queries.
3. Apply the CSS override rules to device specific files if necessary.
Example of different stylesheet files for normal and retina screens:
It would be best to do this directly into bubble, but I suspect it will be more time consuming at the moment.
Please let me know if anyone found this useful or if you have any suggested changes to the approach.
