How to use canvas scaler?

Hello everyone, I am having trouble understanding how the Canvas Scaler component works. It seems to me that it takes a reference resolution and compares that to the device’s resolution. So by what I understand, if the device resolution is divisible by the reference resolution, it scales correctly. So I assume that if the X field is set to 1 and the Match completely on Width (which I assume is X) then, because whatever X resolution is divisible by 1 (our reference X), it would, well, scale correctly.

But instead, everything gets huge, so would anyone mind explaining what is happening? Thanks.

Are you using “Scale With Screen Size” mode? In that case, you fill in the resolution of the screen you designed your UI for. For example, if your UI button’s size was designed for a canvas size of 1920x1080, then you fill in X: 1920, Y: 1080 (16:9).

On the match slider, if you match width (0), and your game is played on a screen with resolution of 1280x1024 (4:3, or 12:9), since this screen size has lower width:height ratio than your reference resolution, the canvas’s height will expand, its width will stay the same.

EDIT: @pigaroos Here’s an example:

My background sprite has the resolution of 1424x640 (designed to fit 20:9 ratio screen)

My Canvas Scaler’s setting: