Unity 迷你游戏适配 iPhone 的 5 项改进要点

在PC上可以正常游玩的Unity制作的小游戏，在实际iPhone设备上确认时，可能会出现UI和文字过小、按钮难以点击、与刘海屏重叠等问题。

本文总结了在不强行缩小面向PC的视觉效果的前提下，将画面调整为在智能手机上也能轻松操作的基本方法。

1. 使Canvas Scaler跟随屏幕尺寸调整

按以下方式设置Canvas中的Canvas Scaler：

UI Scale Mode: Scale With Screen Size
Reference Resolution: 1080 x 1920（竖屏模式）
屏幕匹配模式：Match Width Or Height
以 0.5 为基准在真机上进行调整

如果是横屏，则基准分辨率设为 1920 x 1080。但仅设置基准分辨率还不够。如果各UI的锚点（Anchor）仍固定在屏幕中央，当纵横比发生变化时，位置就会错位。

2. 按功能分别设置锚点

根据“希望将UI放置在屏幕的哪个位置”进行划分。

分数/状态：上边锚点
操作按钮：锚定到底边
对话框：锚定到中央
全屏面板：拉伸至四边

使用 Horizontal Layout Group 或 Vertical Layout Group 作为父元素，比固定坐标更容易适应屏幕宽度。

3. 避开刘海和主屏幕指示器

在 iPhone 上使用 Screen.safeArea，将 UI 限制在安全区域内。

using UnityEngine;

[RequireComponent(typeof(RectTransform))]
public sealed class SafeAreaFitter : MonoBehaviour
{
    private RectTransform rectTransform;
    private Rect lastSafeArea;
    private Vector2Int lastScreenSize;

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

    private void Update()
    {
        if (lastSafeArea != Screen.safeArea ||
            lastScreenSize.x != Screen.width ||
            lastScreenSize.y != Screen.height)
        {
            Apply();
        }
    }

    private void Apply()
    {
        Rect safe = Screen.safeArea;
        Vector2 anchorMin = safe.position;
        Vector2 anchorMax = safe.position + safe.size;

        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;

        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
        rectTransform.offsetMin = Vector2.zero;
        rectTransform.offsetMax = Vector2.zero;

        lastSafeArea = safe;
        lastScreenSize = new Vector2Int(Screen.width, Screen.height);
    }
}

将此组件附加到负责整个屏幕UI的父级RectTransform上。若需支持屏幕旋转，则检测分辨率或safeArea的变化并重新计算。

4. 点击区域应比视觉外观更大

如果仅将小图标设为可点击对象，在实际设备上会难以按压。

确保按钮的最小尺寸足够大
在按钮之间留出间距
将图标的透明父元素作为点击区域
按下瞬间通过颜色、缩小和声音等给予反馈

仅靠悬停效果无法在触控设备上传达状态。PointerDown 需明确显示选择状态。

5. 字体大小应以"可读"而非"能塞进框内"为标准

TextMeshPro 的自动缩放功能虽便利，但有时会导致文字为适应边框而变得过小。

为正文、按钮和补充说明设定最小字号
长篇说明不必始终显示，应在需要时展开
将当前目标和下一步操作简短地显示在屏幕上方
不仅用文字，还要通过图标和进度条传达重要状态

在游戏画面中，有时比增加信息量更清晰的做法是聚焦于“现在要做的一件事”。

WebGL版还需检查内存与首次加载情况

排除未使用的纹理和音源
确认纹理尺寸与压缩设置
重新审视长BGM和音效的加载方式
场景开始时不要生成大量 Prefab
已在真机Safari和LINE内置浏览器中分别确认

即使在编辑器上运行流畅，受终端内存或浏览器限制，实际表现也会有所不同。

在实机测试中确认的项目

从首次加载到游戏开始是否会让人感到困惑
能否在不放大文字的情况下阅读？
是否能单手按下主要按钮？
是否与刘海屏或主屏幕指示器重叠？
屏幕旋转后UI是否不会崩坏？
是否能理解退出游戏后的返回方式？

总结

适配智能手机并非简单地将PC版画面缩小。

Canvas Scaler（画布缩放器）
锚点与布局组
Screen.safeArea
足够的触控区域
可读的文字与精简的信息量

在实际设备上确认这5点，可以大幅改善操作性。特别是在LINE迷你应用和WebGL游戏中，将浏览器的显示区域也包括在内进行实际设备确认非常重要。