Ui is different sizes on different devices

[0k_Jackk (Jack)]

Hello, my UI looks different depending on the device. I used the UnitConversion plugin to try and fix this but it still looks off. I have a UIAspectRatioConstraint inside the main frame and everything’s size is set to scale instead of offset.

Normal:

On an Ipad screen:

[Foxstream52 (Scary)]

Theres actually a plugin for this, hope it helps!

UI Auto Scale plugin

[supercrash950 (cr4SH)]

You should always change the scale and not the offset.

To avoid that in the future, everytime you create a UI element, change the size to {0.1,0,0.1,0} then scale it manually and it will change the scale and not the offset.

[Scriptifi (scriptifyy)]

For any other people who see this message, NEVER use plugins for scaling your UI. They are very unreliable and their methods aren’t the best. The only plugin I would genuinely recommend is UI Tools by @zilibobi since it is actually accurate. Even with that you should use roblox’s given tools for scaling such as: UIScale, UIAspectRatio, UISizeConstraint, UITextSizeConstraint.

@supercrash950

You should always change the scale and not the offset.

Not always, you should only do this when its required.

[zilibobi (Checkmate)]

@Scriptifi

UIScale

My plugin actually has a new feature for scaling with UIScale. I use the same formula the plugin uses for calculating the required scale in one of my games and it works really well.

If anyone is interested, check out these replies:

UI Tools: The All-In-One Interface Design Solution

Fixed it: You can see both are pretty much the same, though you may have to tweak the ‘Resolution’ attribute a bit. This attribute is now a Vector2, representing the original width and height to scale up/down from. [image] The runtime script is automatically updated, but you’ll have to re-scale everything or change the ‘Resolution’ attribute manually for the new version to work properly. You can also do this now: I couldn’t reproduce this bug. It’s in the update.

UI Tools: The All-In-One Interface Design Solution

There are two scaling options now: scaling with relative units (old); scaling with the UIScale instance (new). From the UIScale’s documentation page: [image] Use relative unit scaling if you want the old behavior. UIScale pros: Easy UI modification (nothing about your UI is changed when scaling in terms of properties and modifiers); Works even for UI added after scaling (if it’s a child of the scaled instance); No overhead (only one instance is added, though it requires a script); Work…

Here’s a comparison between scaling with relative units and UIScale scaling:

[Amritss]

Because UI is automatically scaled depending on the screen size, it would be a pain to actually scale them all to the correct size on different devices.

Therefore, use a plugin to scale UI.