iOS 页面布局兼容放大模式

这篇具有很好参考价值的文章主要介绍了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参考。

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

正常数据

// 正常模式
(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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 利用webview 内嵌实现小程序,h5 ,app 页面跳转和数据通讯,附带实现pdf文件的预览(兼容ios和安卓)

    承载网页的容器。会自动铺满整个小程序页面, 个人类型的小程序暂不支持使用。 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效 相关的属性说明:开放能力 / web-view (qq.com) 2.bindmessage 可以实现网页端和小程序之间通讯, 但只在特定时机触发 网页端向小程序

    2024年02月02日
    浏览(73)
  • iOS实现弹簧放大动画

    效果图 实现代码

    2024年02月06日
    浏览(30)
  • iOS —— xcode14兼容 iOS9~iOS10系统

    xcode14兼容 iOS9~iOS10系统 在Xcode升级到Xcode14以后,系统的支持版本升级到了iOS11.0。但是我们项目需要支持iOS9,脚本打包错误提示: The iOS deployment target \\\'IPHONEOS_DEPLOYMENT_TARGET\\\' is set to 9.0, but the range of supported deployment target versions is 11.0 to 16.2.99. 下面记录适配过程。 适配过程同

    2024年02月09日
    浏览(50)
  • ios safari 正则兼容问题

    系统是自己开发的采购管理系统; 最近升级系统之后客户反馈部分苹果手机现在在进入单据界面的时候报错, 内容显示不全; 安卓手机正常; 苹果首页是之前有使用过系统的才不行, 如果是之前没有使用过系统, 现在也是可以 (后面查证这一点可能不是很准确, 跟是否等过过系统没

    2024年02月07日
    浏览(52)
  • YYText iOS17兼容问题

    使用YYText ,1.0.7在iOS17会遇到如下崩溃 主要原因是UIGraphicsBeginImageContext中的asert引发,而改接口早就标记为API_TO_BE_DEPRECATED,建议使用UIGraphicsImageRenderer替换。 由于YYText早已没有维护,于是fork了一个自己的git进行修正,主要修正逻辑在textAsynLayer 替换为 具体可参见git@github.com:ia

    2024年02月03日
    浏览(64)
  • ios中关于video标签poster属性兼容问题(ios视频截帧)

    需求如下 移动端h5页面(微信浏览器下)需要上传视频并回显封面,用户点击中间的播放三角可以进行视频的预览;问题就出现在ios手机上使用video的poster属性并不能显示出视频封面,而安卓手机可以正常显示视频的第一帧; 效果图 问题分析: 在ios系统中有个保护机制, 如果

    2024年02月05日
    浏览(56)
  • 记ios的input框获取焦点之后界面放大问题

    在移动端开发项目中,发现页面在使用 iPhone 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大,而且失去焦点之后页面不能返回原来的样子。检查了下功能上没有什么大问题,但是页面会整体放大,而且失去焦点之后页面不能返回原来的样子。对

    2024年02月12日
    浏览(49)
  • new Date(时间)IOS兼容问题

    问题 后端接口返回数据格式为Time:\\\"2021-10-15 23:59:50\\\",安卓上 new Date(Time)没问题,IOS部分较低系统执行new Date(Time)返回为NaN。 当时间格式为 yy-mm-dd HH:mm:ss 时,ios系统认得“/”却不认得“-”,所以需要把\\\"-\\\"转化为“/”。 解决办法: 使用replace替换,直接将 - 替换为 / ,这样

    2024年04月14日
    浏览(47)
  • uniapp 蓝牙小程序-兼容安卓和iOS

    withTimeout方法可以在搜寻设备时等待指定的秒数,如果30秒内未搜索到则取消搜索  计算数据校验和: 校验字节等于命令字节与所有数据字节之和的反码。求和按带进位加 (ADDC)方式计算,每个进位都被加到本次结果的最低位(LSB)。 vue页面代码   js函数代码 

    2024年02月03日
    浏览(43)
  • element ui ios移动端 表单兼容问题

    element ui 的表单在禁用状态时,在android手机显示无与pc显示一样,但是在ios显示却天差地别,基本看不到input    placeholder   属性添加的默认提示信息。效果图如下: 在ios显示:  在android手机: 怎么改css都没用,后面查了一些资料,才找到问题所在: 移动端环境下android只需

    2024年02月04日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包