iOS 页面布局兼容放大模式

背景

有用户反馈,在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 遮挡。

页面支持滑动

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

常见的滑动方式:

  1. 直接使用 UITableView 作为基础页面底层 View.根据内容定义各种 Cell。
  2. 使用 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) 
相关推荐
瓜子三百克3 小时前
CALayer的异步处理
macos·ios·cocoa
吴Wu涛涛涛涛涛Tao3 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
杂雾无尘6 小时前
开发者必看:如何在 iOS 应用中完美实现动态自定义字体!
ios·swift·apple
kymjs张涛8 小时前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
与火星的孩子对话1 天前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
恋猫de小郭2 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海2 天前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
旷世奇才李先生2 天前
Swift 安装使用教程
开发语言·ios·swift
90后的晨仔2 天前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios
finger244802 天前
谈一谈iOS线程管理
ios·objective-c