How to scale GUIs for all devices

I have a problem with scaling the guis properly! Playing on pc works fine but from mobile it’s a complete mess

(I used auto scale lite and this is the result)
Thanks!

4 Likes

Maybe this helps,

Video

Roblox Studio | UI Scaling Tutorial [How to Fit a UI on the Screen on any Device] - YouTube

If not, try this, it’s a roblox developer hub article, I hope it helps:

Article

Cross-Platform Development

Another dev forum article about this I guess?

Similar questions

How to scale or position same on all devices - #4 by PurpSinister

If you need more help, I can try explaining it myself in more detail, at least I’ll try :slightly_smiling_face:

4 Likes

I have the most unorthodox method of achieving scaling on multiple devices.
I type in 1,1,1,1 into the size bar of my UI element. image then i resize by dragging the handles. For some odd reason, it works like a charm. my frame on a 4s


my frame on xbox

4 Likes
  1. Go onto properties for the frame that you want to scale
  2. Go onto size then click the arrow for the x and y axis
  3. Set the offset for both axis to 0
  4. Now you can scale the frame however you like (using the properties tab or just by drawing it around like usual)
  5. You should be done if it doesn’t work, please tell me at what point it didn’t work then I can send a screenshot to help further.

Tip: It is easier to do these steps when creating the GUI so you don’t have to re-size the frame!

Have a nice day! :slight_smile:

Edit: This will mean that you have to re-size your GUIs but, without using a plug-in, it is the only way.

4 Likes

You can use my plugin, it adds UIAspectRatioConstraint that makes frame on X axes same on all devices. The plugin have other functions too like round corners or scale UI on all devices.

2 Likes