背景
有用户反馈,在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参考。
+ (BOOL)isZoom {
return UIScreen.mainScreen.scale < UIScreen.mainScreen.nativeScale;
}
正常数据文章来源:https://www.toymoban.com/news/detail-668815.html
// 正常模式
(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文章来源地址https://www.toymoban.com/news/detail-668815.html
(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)
到了这里,关于iOS 页面布局兼容放大模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!