横屏切换及1080x1920分辨率下文本尺寸变化问题求解

Hey there! This is a super common headache when working on responsive UI, so let’s break down the most reliable fixes step by step (I’m assuming you’re using Unity since it’s the most common engine for this scenario, but the core logic applies to most UI frameworks):

• Adjust Canvas Scaler (Quickest Fix)
  This is the go-to solution for most cases. The Canvas Scaler controls how your entire UI scales relative to screen resolution:

  1. Select your main Canvas object, then find the Canvas Scaler component
  2. Set UI Scale Mode to Scale With Screen Size
  3. Input 1080 as the X value and 1920 as the Y value in Reference Resolution (this tells the engine to scale UI based on this target resolution)
  4. For Screen Match Mode, choose:
     • Match Height if you want UI to prioritize fitting the screen height (great for vertical layouts like mobile)
     • Match Width if width is your priority
     • Match Width or Height if you want a balanced scale (drag the slider to adjust weight)

• Lock Text Size with Pixel Units
  If you’re using TextMeshPro (highly recommended for better text rendering), enable the Keep Text Size With Screen Size option in the TextMeshPro component. For standard UI Text:

  • Ensure your Font Size is set to a fixed pixel value (not relying on parent scaling)
  • If you use Best Fit, set strict minimum and maximum font sizes to prevent unwanted shrinking

• Custom Script for Precise Control
  For full control over text scaling logic, add a simple script to your Text component:

  using UnityEngine;
  using UnityEngine.UI;
  
  public class ResponsiveText : MonoBehaviour
  {
      public Text targetText;
      public Vector2 referenceResolution = new Vector2(1080, 1920);
      public float baseFontSize = 24f;
  
      void Start() => ResizeText();
      void OnRectTransformDimensionsChange() => ResizeText();
  
      void ResizeText()
      {
          float screenRatio = (float)Screen.width / Screen.height;
          float referenceRatio = referenceResolution.x / referenceResolution.y;
          float scaleFactor = screenRatio > referenceRatio ? 
              (float)Screen.height / referenceResolution.y : 
              (float)Screen.width / referenceResolution.x;
          
          targetText.fontSize = Mathf.RoundToInt(baseFontSize * scaleFactor);
      }
  }
  

  Attach this script to your Text object, assign the target Text component, and tweak the base font size to your preference.

• Check Parent Object Scaling
  Sometimes the issue isn’t with the Text itself—double-check all parent objects of your Text component. If any parent has a non-(1,1,1) scale value, it’ll shrink or stretch the text unexpectedly. Reset parent scales to (1,1,1) unless you intentionally want that scaling.

Most of the time, the Canvas Scaler method will solve your problem instantly. If you run into edge cases, the custom script or TextMeshPro options will give you the flexibility you need!

内容的提问来源于stack exchange，提问作者Asssaa HJiok