Cross platform UI if pretty hard


I’ve read the tutorial that’s getting linked every time someone asks about UI. It mentions that:

That’s cool. But how?
Right now my UI looks perfect on desktops and tablets but is too small on phones. Is there any way I can check whether the player is using a phone so I can scale/change the ui to a specific one that would fit small screens?
I don’t think I can get away with scaling and aspect ration constraints and even if I could I probably wouldn’t. For example, I’d rather remove a small description text in one of my panels for mobile users because it will be nearly unreadable and isn’t crucial for gameplay. Or change the layout so that it’s more comfortable.

With that being said, are there any way to check if a player is using a small screen besides .TouchEnabled workarounds?

1 Like

the only way you can make uis scale across devices is by using using the scale size and position rather than using offset

1 Like

A way of doing this would be like listed in this thread:

There’s probably alternatives, but this may work for you. You may have to alter the script a little bit to work with what you need (e.g. checking different devices)

There’s a good reason why that is. It’s a useful tutorial and it contains generally the same answers everyone’s going to give you.

It’s useful but It’s kind of a letdown that it says “You should make individual interfaces” but doesn’t explain how, instead proceeding to just explaining how to make objects fit properly. Not really any answer to my case.

If I’m going to check for a mobile user with input serivce it will likely affect tablet users too. I think I can manage with .ViewportSize but are there better way to do what I’m trying to?

1 Like

You might want to look into responsive design practices; if your UI can automatically adapt to different screen sizes and input types, then you can use the same UI for all platforms :slightly_smiling_face:

One example might be, when you detect the player has a touch-enabled device, you could increase the size of buttons on screen to make them easier to tap. Other examples might be rearranging UI elements around the screen when you detect the screen is in a portrait orientation to make sure elements don’t clash. The adjustments you can make to your UI are ultimately up to you and depend on your specific UI design, and so we won’t really be able to dictate that for you abstractly.

My UI scales good enough already on desktop and tablet and on mobile I just need it to scale it around 1.5 which I can do with UIScale but the part I’m stuck at is detecting mobile screen ;_;

1 Like

With the use of game:GetService(“UserInputService”).TouchEnabled, you can check whether the user have a touchscreen or not but touchscreen monitors might be detected as well.

It is recommended to do multiple checking, or just check the screen size, if below a specific screen size, the UI will change to another one