Gui Scaling Incorrectly on actual device

I tested my gui with the built in device emulator and it looks fine, but then when I tested it on my actual phone, the dimensions are off. Any help?

Set your gui position to scale.

1 Like

You most likely need to change it to scale. You likely have the GUI set in offset. To put it simply, ‘Offset’ is the size in pixels. So for example, if you set a GUI’s size to X: 25 pixels Y: 25 pixels, and a player with a device with only 20x10 pixels, then the GUI would overtake their screen. However, ‘Scale’ goes off of a percentage basis of a player’s resolution. So for example, a scale of 1 would be the entirety of a player’s screen, and a scale of 0.5 would mean that the GUI takes up half of a player’s screen.

The way that you can troubleshoot this is by going to your frame’s properties and finding size.
image
You will then need to open the size up completely, exposing “Offset and Scale” for each. For additional explanation, The 2 zeros positions represent the “Scale” of the GUI, and the 502 and 326 both represent the “Offset” of the GUI.
image
From here, best practice would be to change both offsets to 0 and the scales to 0.5. This will make the GUI a quarter of the size of your viewport. From here, you should be able to scale it to how you would like it.

My advice is that whenever you create a GUI and intend for multiple people to view it, when you enter each part of your GUI, go ahead and change the size to scale 0.5 and offset 0. This will allow for the GUI to keep the same ratio to their screen size.

I also recommend that once you get the GUI sized how you would like, you add a UIAspectRatioConstraint. I suspect this could be the main reason for your GUI looking off on your phone. This helps prevent the UI from becoming too wide on certain user’s screens. AutoScale Lite is excellent for this.

The GUI positions should be automatically set to scale, at least it is for me. Do you mind providing a screenshot of your GUI position property?