I have a problem where a GUI moves under the icon bar on mobile devices. The Images below will show an example of what I mean.
On Mobile
On PC
I tried several solutions but nothing worked so far. If anyone has a solution to this problem, please post below. Thanks in advance.
Hey @Johac. When it comes to UI design, it’s all about scale and offset. What’s happening there is a result of improper use of scale and offset. I’m gonna do a very quick explanation of what they do.
Scaling
Using the scale of the vector size/position will remain relative to the size of the player’s screen. So say you the developer have an iPhone 8 and used that phone as a reference when you was designing the UI, and one of your players has an iPhone XR which has a smaller screen and for him, the UI is not in the same position. Well this happens when you try to use the scale property for all your positioning. This is a consequence of using the built-in UI editor as well. Essentially what’s going on is the UI is being scaled according to your iPhone 8’s screen size and when it’s formatted and drawn onto a smaller screen, it tries to keep the UI the exact same distance/size from the top of the screen.
Offseting
Using the offset for sizing or positioning of a UI will ensure that the anchor point will be exactly the specified amount of pixels from it’s parent position/size. That means that no matter the size or resolution of the screen, it will remain that exact distance or size.
To fix this, you would use offset. So in the position property:
frame.Position = UDim2.new(0,0,0,0)
It’s formatted as X Scale, X Offset, Y Scale, Y Offset so simply do this:
frame.Position = UDim2.new(0,0,0,35)
By doing it this way, you ensure that the UI will ALWAYS be 35 pixels below the top of the screen regardless the size of the screen. I really hope this helps!