How would you make a UI look the same on all devices?

What you see on my game on the average laptop:

What you see on an iPhone 5:

What you see on an iPad Mini:

Now why are they all different? How would I make them all look the same or at least in some way managable?

1 Like

UIAspectRatioConstraint maybe the answer for this since it makes all UI equal on all Devices

1 Like

Use scale and not offset for positioning and sizing your plan button.

If you set the anchor point to {0.5, 0.5} and position to {0.5, 0, 0.5, 0}, the button will be centered.

The format for positions and scales are
{xScale, xOffset, yScale, yOffset}

Scales are a value 0 to 1 where 1 is the full screen.
Offsets are in pixels.

1 Like

Use this plugin:

Even with this, it still doesn’t work.image

This only worked for the main screen, not the other one.

are you using offset? seems like you are just by looking at the thread

I am, how would I make it so it’s converted to regular instead of offset?

well this function helps me convert ui into scale

function Scale(offX, offY) -- > UDim2 Scale version from the Offset
    local Camera = workspace.CurrentCamera
    return UDim2.fromScale(offX / Camera.ViewportSize.X, offY / Camera.ViewportSize.Y)

I recommend making a large frame with a set aspect ratio (using an UIAspectRatioConstraint) then putting all of your UI inside the frame (set the AnchorPoint to 0.5, 0.5 and the Position to 0.5, 0, 0.5, 0 to center the frame). With the set ratio, you can then use scale for everything (in general, never use offset unless you know what you’re doing). If everything fits in the frame and you don’t use offset, the UI will scale properly on all devices (note this is only for centered UI, for UI anchored to the side you can do something similar but with a different AnchorPoint, Position, and AspectRatio).