Hey, currently working on a phone concept UI, having issues with scaling between desktop and mobile. Not sure what I’m doing wrong or if I need to use some form of constraint. Any help would be great.
As you can see on the mobile view, all the apps are retaining the same size as desktop, 50x50.
I know this due to it being scaled via offset, rather than scale.
The phone screen itself is sized correctly as I’ve used an UIAspectRatioConstraint to keep it correctly sized across resolutions and screens. However, I’m yet to find a solution for the content inside of the screen.
I tried using scale, however it seemed really inconsistent and hard to keep track of, and I also tried using a number of different constraints, which didn’t work either. I’m not sure what to do to fix this
There are many videos that cover this, but if you don’t feel like watching one, you can set size on the frame to 0.1, as well as the position, and that should fix it, the only drawback of this is that you’ll manually have to set the position and size with the scaler.
You can use AutoScaleLite or Pro Version Plugin to scale with GUIs to perfectly scaled with all devices. You can try it now for free by using the lite version.
Add an UIAspectRatioConstraint to every button (using AutoScale Lite Plugin) and make sure the UIGridLayout’s Size is in Scale (not Offset). You’ll have to play around with the Size a bit to make it look the same. Overall this should fix it
Text Scales poorly, especially inside buttons.
Also turns out UICorner is having a good time making it disproportionate to what it looks like on Desktop
i did miss some elements, e.g the Dynamic Island lookalike thing, and some of the topbar
didn’t want to fully commit incase it didn’t work out lol
The position of the frame should be set to 0.1, you should be able to drag it on screen from there, same with the size. The text is a tough one, since I haven’t really seen a fix anywhere, and I don’t know one myself.
