UI that fits every screen, notches included

the short answer

How do I make the UI fit every screen size?

Set the Canvas Scaler to Scale With Screen Size with a reference resolution, then anchor every element to the corner or edge it belongs to rather than leaving it anchored to the centre. On a phone with a notch, fit a full-screen parent to Screen.safeArea so nothing important ends up under the cutout.

A UI built in the Game view at one resolution and never checked at another is a UI that will be broken on most phones. Three things fix it, and they are independent: how the canvas scales, where each element is anchored, and what the notch is covering.

animated diagram

The same three elements on three screen shapes. Each one holds the corner it was anchored to, and on the third the notch takes its bite out of the safe area.

1 — The Canvas Scaler decides the size of everything

By default a Canvas is set to Constant Pixel Size: a 40-pixel button is 40 pixels on every device, which means it is a comfortable target on a laptop and a speck on a 1440p phone. This one dropdown is the fix.

1
Select the Canvas, find the Canvas Scaler component, and set UI Scale Mode to Scale With Screen Size.
2
Set Reference Resolution to the size you are designing at. 1080 × 1920 for a portrait phone game, 1920 × 1080 for landscape.
3
Set Screen Match Mode to Match Width Or Height, then drag the slider to 0 for a portrait game and 1 for a landscape one.

2 — Anchors decide where things stay

An anchor says which part of the parent an element holds on to. A button anchored to the centre and placed 400 pixels to the right is 400 pixels right of centre on every screen — which is off the edge on a narrow one. Anchor it to the right instead and it stays the same distance from the right edge, whatever that edge is.

Anchor each element to the corner or edge it visually belongs to: a health bar to the top-left, a jump button to the bottom-right, a title to the top-centre.
Hold Alt while clicking an anchor preset and the element jumps to that position too, instead of only changing its anchor and staying where it was.
For something that should span a width — a top bar, a dialogue box — drag the anchor handles apart so it stretches instead of sitting at a fixed width.

3 — The safe area, on phones with a notch

Screen.safeArea is the rectangle the system guarantees is not covered by a notch, a punch hole, a rounded corner or the gesture bar. Unity has no built-in switch for it: you resize a RectTransform to match, and put your UI inside that.

SafeAreaFitter.cs — attach to a full-screen child of the Canvas

using UnityEngine;

[RequireComponent(typeof(RectTransform))]
public class SafeAreaFitter : MonoBehaviour
{
    RectTransform rt;
    Rect last;

    void Awake()
    {
        rt = GetComponent<RectTransform>();
        Apply();
    }

    // The safe area changes when the phone rotates, so do not do this once.
    void Update()
    {
        if (Screen.safeArea != last) Apply();
    }

    void Apply()
    {
        last = Screen.safeArea;

        // Anchors are 0–1 fractions of the screen, so divide by the screen size.
        Vector2 min = last.position;
        Vector2 max = last.position + last.size;
        min.x /= Screen.width;  min.y /= Screen.height;
        max.x /= Screen.width;  max.y /= Screen.height;

        rt.anchorMin = min;
        rt.anchorMax = max;
        rt.offsetMin = rt.offsetMax = Vector2.zero;
    }
}

Put it on a child of the Canvas that fills the screen, and parent your HUD to that child. Never put it on the Canvas itself — the Canvas Scaler owns that RectTransform.
Backgrounds stay outside it. A background that respects the safe area leaves ugly bars beside the notch; only the things you must be able to see and tap go inside.
In the editor, Screen.safeArea is the whole screen, so this code appears to do nothing until you build. The Device Simulator window is the only way to see it without a phone.

Check it before you ship it

1
Open Window▸General▸Device Simulator and step through a few phones, including one with a notch and one very tall one.
2
In the Game view, add the two extremes as custom resolutions: 4:3 and 21:9. If the UI holds at both, it holds everywhere in between.
3
Check tap targets, not just looks. Anything a finger has to hit wants about 9 mm — roughly 48 device-independent pixels — however small it looks on your monitor.

the lesson that builds this

Touch controls and joystick

This post is a standalone recipe. In the course, the same thing is built as part of the one project that runs through all five tabs — Camera & Input, lesson 05.