Project to iOS via PhoneGap: great on iPad, crappy on iPhone

So I've created my app (very simple app, but does what I need)... and I export to PhoneGap (Cocoon and EJecta won't work for me as I'm using Textboxes and XML plugin -- found THAT out after the fact)

Fortunately PhoneGap works great for the most part. It's not a complex app at all and doesn't require much speed.

However, when I run on the iPad, it looks just fine.

When I run on iPhone 5, the fonts in the textboxes are all too large. I tried changing from pixel size in the CSS settings to "em" sizes, to no avail. On the iPhone the fonts are just too huge for the smaller screen.

Anyone know of a good solution for this? I'm essentially looking up data in an XML database and displaying in various text fields on the screen.

I'd also like the iPhone to not put the black bars on the right and left of the app (landscape only), gonna try some of the other "Fullscreen in Browser" options now to see what that does for me...

You need to learn how to handle resolution ratios better because iPad is 4:3 and iPhone is 16:9 its wildly different and that needs to be at the core of your development from the start. If you go with Letterbox scaling, it will always put black bars to make it fit.

If you don't want that, then use Scale Inner/Outer and design the app accordingly.

Read tutorial here: https://www.scirra.com/tutorials/73/sup ... reen-sizes

Once you figure it out, you can add code that scales your text font size based on the size of the device screen.

You can do comparisons like ViewportRight(Layer) > X pixels (depending on your app resolution/window size & scaling), change the font size.

Thanks for the information — While waiting I did something reasonably close. I'd read that link before but it's pretty vague, but I did alter the font size based on the resolution and that got me past that hurdle. The bars are really that big a deal for this app.