iOS 页面布局兼容放大模式

Code&Ocean2023-08-27 19:37

背景

有用户反馈，在iPhone SE 2代存在遮挡UI界面问题，经过分析，发现用户开启了放大模式（Display Zoom -> Larger Font）导致实际显示时屏幕大小与正常模式不同，所以导致部分UI遮挡。

各手机屏幕在正常模式和放大模式对比参考：

手机型号	正常模式 size	Larger Font Size	备注
iPhone SE2, iPhone 6, 6s, 7 和 8	375×667	320×568	等同于 SE 1/iPhone 5(s)代屏幕大小
iPhone X and XS等	375×812	320×693
iPhone 11 Pro等	414×896	375×812	等同于iPhone X
iPhone 12 mini等	360×780	320×693

也可参考：How iOS Apps Adapt to the various iPhone 12 Screen Sizes

解决方案

可以通过滑动或者选择兼容屏幕来避免 UI 遮挡。

页面支持滑动

对于常规页面，都建议支持滑动，除非页面内容非常少。

常见的滑动方式：

直接使用 UITableView 作为基础页面底层 View.根据内容定义各种 Cell。
使用 ScrollView + View 来支持滑动。

选择对应最小屏幕兼容

根据应用正常模式要兼容的最小屏幕来考虑 Larger Font 的最新屏幕。比如，正常最小支持屏幕为 iPhone SE2代，如果想要完美兼容放大模式，应该适配 iPhone SE 1代 屏幕大小。

综上，建议非特殊页面都支持页面滑动，否则应用考虑是否兼容 iPhone SE 1代。

UIScreem相关数据

幸运的是可以通过UIScreen.main.bounds获取实际的屏幕大小（即实际显示大小），已经基本满足日常开发和布局。

也可以通过以下代码段判断是否开启了放大模式stackoverflow参考。

objective-c 复制代码

+ (BOOL)isZoom {
   return UIScreen.mainScreen.scale < UIScreen.mainScreen.nativeScale;
}

正常数据

shell 复制代码

// 正常模式
(lldb) po main.bounds
(origin = (x = 0, y = 0), size = (width = 414, height = 896))

(lldb) po main.nativeBounds
(origin = (x = 0, y = 0), size = (width = 828, height = 1792))

(lldb) po main.nativeScale
2
(lldb) po main.scale
2

// 缩放版本 display zoom Larger Font

shell 复制代码

(lldb) po main.scale
2
(lldb) po main.nativeScale
2.2080000000000002

(lldb) po main.bounds
(origin = (x = 0, y = 0), size = (width = 375, height = 812))

(lldb) po main.nativeBounds
(origin = (x = 0, y = 0), size = (width = 828, height = 1792))

(lldb)