UnityRef is currently in early development. Some features may be incomplete and/or not functioning.

UNITYREF

Your Pit Stop For Solving ANYTHING in Unity

ui

[UGUI] Scale Responsive Interfaces Across Desktop and Mobile Aspect Ratios

Solution

optimizationmobileinterfaceuxaccessibility

Unity 2021.x - Unity 6.3.x

Published 8 days ago

Author Profile Photo

Reviewed by _architect

Chief Editor

80 posts
Issue

 Designing a user interface that scales effectively across a spectrum of screen resolutions remains a significant hurdle. Utilizing a single Canvas and a CanvasScaler set to Scale With Screen Size with a Match WidthOrHeight of 0.5 often results in elements appearing disproportionately sized or becoming illegible when transitioning between extreme aspect ratios, such as 21:9 desktop monitors and 9:16 portrait mobile devices.

Avoid creating a single universal UI for all devices. Instead, design distinct layouts for specific aspect ratio categories to ensure the CanvasScaler maintains visual integrity across platforms.

Explanation

The most effective method for handling diverse screen aspect ratios is to implement distinct UI layouts optimized for specific orientation categories. Rather than forcing a single UI to adapt to every possible resolution, which compromises usability, tailored layouts should be designed for landscape, portrait, and tablet environments.

  1. Define your target aspect ratio categories based on the intended platforms.
  2. Configure the CanvasScaler component on your Canvas to the Scale With Screen Size mode.
  3. Set a Reference Resolution (e.g., 1920x1080) that matches your primary design target.
  4. Adjust the CanvasScaler Match property to either 0 (Width) or 1 (Height) depending on whether the horizontal or vertical axis is most critical for your content.
  5. Use the Game View resolution profiles to simulate extreme ratios and identify where layouts break.

Developing separate UI prefabs for mobile and desktop allows for better design choices, such as larger touch-friendly buttons for mobile and higher information density for desktop. This proactive testing and specialization ensure each user interface provides an intuitive experience regardless of hardware.

Additional Tips

  • Use the AspectRatioFitter component on specific UI panels that must maintain a constant shape, such as square minimaps.

  • Leverage VerticalLayoutGroup and HorizontalLayoutGroup with LayoutElement components to automate positioning without manually tweaking every RectTransform.


Related Posts Haven't quite found a solution to your problem? We think these posts might help you.
[UI] Fix Canvas Prefab Offset and Locked Transform Issues[Physics] Trace Raycast Origin Objects Instantly[uGUI] Fix GraphicRaycaster Failing to Detect Nested UI Elements

Content inspired by a Unity discussion post.