GUI Styles for iPhone/Android - font/button sizing?

I'm trying to get my GUI (text lables, buttons) to be legible on different devices. On old iTouch, no problem, less pixels means bigger stuff. For the hi-res newer devices, everything is so tiny.

What's the best way to detect this state of affairs, preferably at runtime so I don't have to have multiple scenes, just one 'mobile' scene? That is, change the GUI (style? font size?) depending on the screen resolution and platform.

There are, I guess, several solutions to the problem depending on how you implemented your GUI. It is a nasty problem, and the solution is not pretty.

Here is what we did: (we only use resolution based on `Screen.width` and `Screen.height`, but it should be easy to incorporate device checks using AppTechStudios's method to take the real size into account as well).

Since there are no dynamic font scaling on mobile devices, you need to import a few different size fonts for each one you want to use. (We import three sizes of each font). For this reason, it is a good idea to limit the number of fonts you use, otherwise it becomes a real nightmare to maintain.

All our styles are in a single class. When this class Starts, we check what font is used for each style (for instance, `button_label_font_1`), based on the resolution, we then change this to `botton_label_font_2`, or `botton_label_font_3`, or keep it the same.

If you use relative layouts everywhere, that is fine. If you use absolute layouts, then you have to recompute sizes. We store `Screen.width / 800` in a globally accessible variable, and scale all our GUI sizes by it. `800` is the size we designed for; our base size. You can also store and use `Screen.height / 600` (where `600` is the base height), and use that scale for heights, but this changes the aspect ratios of rectangles (buttons) which may be a problem (it is for us).

If you don't skin the GUI with components with borders, then that's fine. Otherwise you might need to change those as well (thick borders look awful on low resolution devices).

In addition to standard GUI components for menus, we also use a combination of `GuiText`s, `GuiTexture`s and rendered planes for the in-game GUI (the standard GUI is a real performance hog on mobile devices). These need to be positioned using calculations based on the scale variable(s) as explained above.

If your GUI is even moderately complicated, be prepared for a lot of annoying tweaking, and test various sizes regularly to avoid surprise.

Good luck :)

I don't program for mobile devices, but couldn't you just scale your buttons up relative to the resolution of the screen the device is on using Screen.currentResolution?

ie. if you had 4 evenly sized buttons each would be 4 / Screen.currentResolution.Width (or height depending where your buttons are)

Personally I always use images for buttons rather than game rendered text so scaling is easy. But if you needed to scale up text, just a quick lookup table based off currentResolution is probably easiest method.

I am not sure about changing the font and stuff, but I know you can access what device is being used. For example, the iPad:

if(iPhoneSettings.model == "iPad") {