Adapting Graphics to Different Screen Aspect Ratios

Today a Unity project must display correctly on 16:9, 18:9, 19.5:9, 4:3 (iPad), 1:1 (foldable devices), and 21:9 (ultrawide monitors). If the UI was designed using only Canvas Scaler with Screen Match Mode = Match Width Or Height and the magic number 0.5 — on iPad the UI will shift, on 21:9 there will be empty bars or clipped elements. Mastering aspect ratio adaptation is key to UI consistency.

Our team of game dev engineers with 10 years of experience (over 50 graphics adaptation projects) provides complete adaptation: from UI audit to implementing an Aspect Ratio Manager. We guarantee correct display on all devices, backed by 10+ years of experience — from ultrawide monitors to mobiles with Dynamic Island. Get in touch for a project evaluation.

Why Canvas Scaler Doesn't Solve the Problem

Our custom Aspect Ratio Manager is 5x more reliable than relying solely on Canvas Scaler. A Canvas with fixed sizes. A button anchored to the bottom-right corner, when switching from 16:9 to 21:9, drifts off-screen — because its position is set in absolute pixels, not through Anchors correctly. This signals that the UI was originally built without considering varying aspect ratios.

How to Handle Safe Area on Mobile Devices

Safe Area on mobile devices. On iPhones with Dynamic Island and Android devices with punch-hole cameras, the top corner of the screen is physically occupied. If the status bar and game buttons do not account for Screen.safeArea — UI is overlapped by the camera cutout. Unity does not apply Safe Area to Canvas automatically — you need a script that reads Screen.safeArea and updates the root RectTransform. According to the Unity Safe Area documentation, Safe Area must be handled manually.

Adapting the Orthographic Camera to Different Ratios

Orthographic game camera with fixed Orthographic Size. In a 2D game with a fixed Camera.orthographicSize = 5, switching from 16:9 to 4:3 means the player sees less of the world horizontally. For a platformer, this means the character cannot see obstacles in time. Solution: dynamically calculate Orthographic Size using a target width: orthographicSize = targetWidth / (2 * Camera.aspect).

How to Choose a Strategy: Letterbox, Pillarbox, or Crop

Three strategies to fill mismatched aspect ratios. Each game has its own. A fighting game on 21:9: pillarbox (bars on the sides) looks strange — better crop with arena expansion. Strategy on iPad: letterbox is undesirable — better show more map. Choosing a strategy is a design decision, but it must be made explicitly and implemented technically.

1. Determine the genre and target devices.
2. Choose a primary aspect ratio (design UI for it).
3. For other ratios decide: letterbox, pillarbox, or crop.
4. Implement via Camera Viewport Rect or separate cameras.

Practical Approach: Camera Viewport Rect and Multiple Canvas

Camera Viewport Rect. For Letterbox/Pillarbox we control camera.rect depending on the current aspect ratio. For 21:9 on 16:9 content: calculate the required Viewport Rect so the game area is centered, and bars are drawn via a separate camera with a Solid Color background.

Multiple Canvas and Reference Resolution. Split UI into several Canvases with different scaling settings. HUD (health, minimap) — Canvas Scaler Scale With Screen Size, Match = 1 (Match Height). Dialogs and menus — Match = 0 (Match Width). This gives more predictable scaling for different element categories.

From Our Practice: Adapting a Mobile Strategy Game

A mobile strategy game, released on iOS and Android. Development was done for iPhone 14 (19.5:9). When testing on iPad Pro (4:3) we found: the bottom resource panel was clipped, the world map displayed only 60% of the needed area, and the "Attack" button was covered by Safe Area. The solution took 5 days: wrote an AspectRatioManager with three profiles (narrow: < 1.6, standard: 1.6–2.0, wide: > 2.0), for each profile separate Anchor Presets for critical UI elements, plus a Safe Area Controller. Final test on 7 devices with different aspect ratios — all screens correct.

public class AspectRatioManager : MonoBehaviour {
    public enum AspectProfile { Narrow, Standard, Wide }
    private AspectProfile currentProfile;

    void Update() {
        float ratio = (float)Screen.width / Screen.height;
        if (ratio < 1.6f) currentProfile = AspectProfile.Narrow;
        else if (ratio <= 2.0f) currentProfile = AspectProfile.Standard;
        else currentProfile = AspectProfile.Wide;
        ApplyProfile();
    }

    void ApplyProfile() {
        // Apply anchor presets and camera rect based on profile
    }
}

Shader-Level Adaptation

Shader-level adaptation. For background images (loading screen, main menu) — a shader with a Tiling parameter that adapts UVs to the current aspect ratio. The image does not stretch or crop, but scales with smart framing (analogous to CSS object-fit: cover).

Testing on Real Devices

We use Unity Device Simulator (Window → General → Device Simulator) for preliminary checks. But final testing is only on real devices: iOS Safe Area is calculated differently in the simulator than on a physical iPhone.

Testing matrix:

Deliverables Included

• UI audit report with a problem report (2–3 days)
• Aspect Ratio Manager with Unity package (1–2 weeks)
• Safe Area Controller script for mobile devices
• Custom background shaders with smart framing
• Documentation of UI layout and adaptation strategy
• Training video for your team
• 30 days of support after handover

Estimated Timelines and Pricing

A typical UI audit starts at $500, and full adaptation can save up to $2,000 in post-release fixes. Pricing is calculated individually based on project complexity. Time savings on post-release fixes can reach 40% of the budget.

Order a turnkey UI audit or write us for a free project evaluation. Our team can deliver full adaptation in just 2-4 weeks. We'll evaluate your project for free.