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) 
相关推荐
叽哥4 小时前
Flutter Riverpod上手指南
android·flutter·ios
用户091 天前
SwiftUI Charts 函数绘图完全指南
ios·swiftui·swift
YungFan1 天前
iOS26适配指南之UIColor
ios·swift
权咚2 天前
阿权的开发经验小集
git·ios·xcode
用户092 天前
TipKit与CloudKit同步完全指南
ios·swift
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview