I have some user interfaces (UI) that look great at my computer’s resolution (1920x1080). However, on mobile phones and other devices, they don’t remain proportional and end up “breaking”.
What should I do to ensure that all interfaces adapt correctly to the resolution of each device, maintaining the original aspect ratio and layout?
1 Like
Simplest for non-image UIs is anchor points and decimal positioning for the position of the UI. So, let’s say I want to top right a frame for all devices. Anchor point, a vector 2 value should be 1, 0 and the position property, a UDim 2 value of 1, 0, 0, 0.
As for size, just doing decimals is simpler. For example, udim2 of 0.2, 0 0.1, 0 instead of exact width and height size
DOESN’T APPLY FOR IMAGES!
There’s a plugin called AutoScale Lite that lets you to do this with the click of a button (you have to be selecting the UI Object).
There are documentations on it if you’re confused on how to use it.