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) 
相关推荐
2501_916013744 小时前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
牛蛙点点申请出战4 小时前
仿微信语音 WaveView 实现
android·前端·ios
TheLittleBoy5 小时前
iOS 26支持的设备列表
ios·ios 26
Magnetic_h5 小时前
【iOS】block复习
笔记·macos·ios·objective-c·cocoa
2501_9159184114 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063214 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
凉白开<--14 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Digitally15 小时前
如何将 iPhone 备份到电脑/PC 的前 5 种方法
ios·电脑·iphone
Swift社区17 小时前
在企业内部分发 iOS App 时如何生成并使用 manifest.plist
macos·ios·cocoa
他们都不看好你,偏偏你最不争气20 小时前
【iOS】push 和 present
ios