iPhoneX 序列适配方案(小结)

和往常一样，苹果发布新产品，我们作为开发者都需要对系统和UI布局进行适配，今年也是一样。从去年发布的 iphoneX开始，iPhone 手机加入了刘海设计，而且针对于iphone的刘海，需要特殊的适配。今年新出的3款iphone都带有刘海，自然也不例外。

在iphonex以前iphone的顶部导航栏高度都是统一的64，底部导航栏是统一的49；从iphonex的刘海屏开始，出了一个SafeArea的概念，带刘海设计的iphone，顶部导航的高度由原来的64，变成了88，因为状态栏的高度由原来的20变成了44；底部导航栏的高度由原来的49，变成了83。

所以对于iphonex序列的手机的适配，都需要针对顶部导航&底部导航进行适配。只不过原来判断iphonex的方法，已经不能完全判断新的iphonex新机型。要么继续加if{}else{}进行判断，要么就是寻找新的方法，还好iphonex序列的机型的宽高比是有规律的。

从网上看到了别人的帖子列出了iphonex序列机型的宽高&比例：

//iphoneX 序列机型的屏幕高宽
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
//XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//X SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333

iphonex序列iOS原生的适配

#define SCREEN_HEIGHTL [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTHL [UIScreen mainScreen].bounds.size.width
#define KIsiPhoneX ((int)((SCREEN_HEIGHTL/SCREEN_WIDTHL)*100) == 216)?YES:NO
//判断是否为 iPhoneXS Max，iPhoneXS，iPhoneXR，iPhoneX

react-native针对于iphonex序列机型的适配

const {width, height} = Dimensions.get('window');
//iphoneX 序列机型的屏幕高宽
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
//XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//X  SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333

//目前iPhone X序列手机的适配算法：高宽比先转换为字符串，截取前三位，转换为number类型 再乘以100
export const isIphoneX = (Platform.OS === 'ios' && (Number(((height/width)+"").substr(0,4)) * 100) === 216);

总结

无论是iOS原生还是react-native，只要判断出是iphonex序列机型，针对顶部导航栏和底部导航栏做特殊的处理即可。保证顶部导航和底部导航的UI正确显示，能够正确响应事件。（如果适配不好，会出现UI显示不正确和事件不能够响应的情况。）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS11和iPhoneX适配的一些坑

    iOS11和iPhoneX适配的一些坑

    本文转载于:http://www.cocoachina.com/ios/20170921/20623.html 导航栏 导航栏高度的变化 iOS11之前导航栏默认高度为64pt(这里高度指statusBar + NavigationBar),iOS11之后如果设置了prefersLargeTitles = YES则为96pt,默认情况下还是64pt,但在iPhoneX上由于刘海的出现statusBar由以前的20pt变成了44pt,所以iPhoneX上高度变为88pt,如果项目里隐藏了导航栏加了

  • Xcode 9下适配iPhoneX导致iOS 10不兼容问题的解决方法

    Xcode 9下适配iPhoneX导致iOS 10不兼容问题的解决方法

    前言 前久发现测试组提交来一个 bug,说有的布局在 iOS 11 上正常,在 iOS 10 下不正常.分别在 iOS 11 模拟器和 iOS 10.3 模拟器上跑了一下 app,发现果然如此,如下图所示: iOS 11 下点击"省市广播站",下级菜单中的按钮正常显示: iOS 10 下点击"省市广播站",下级菜单显示为空白: 解决方法 检查代码,发现下级菜单中的按钮是以手动布局方式动态添加到一个 scroll view 中的.添加时指定了按钮的框架,框架计算完全正

  • iPhoneX无导航栏页面适配问题解决方案

    原全屏适配在iPhoneX会由于安全区域的变化导致显示不全. 解决方案如下: 在self.view上添加一个view,剩下的视图基于该view布局,view的约束随self.view.safeAreaInsets的改变需要重置: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.view.backgroundColor = [UIColor blac

  • 微信小程序适配iphoneX的实现方法

    微信小程序适配iphoneX的实现方法

    一. 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhone X尺寸上的变化: 苹果对于 iPhone X 的设计布局意见如下: 核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡.也就是说 我们设计显示的内容应该尽可能的在安全区域内

  • iOS11&iPhoneX适配&Xcode9打包注意事项

    1,适配UITableView if#available(iOS11.0, *) { self.contentInsetAdjustmentBehavior= .never self.estimatedRowHeight=0 self.estimatedSectionHeaderHeight=0 self.estimatedSectionFooterHeight=0 }else{ } 2,适配UIScrollView if#available(iOS11.0, *) { scrollView?.

  • 关于适配iOS11和iPhoneX的一些事

    前言 众所周知iOS11正式版终于来了,最近也把app适配了一下,其实也不是很麻烦,来看看我做的一些操作,话不多说了,来一起看看吧. 1.UITableView.UICollectionView的变化 tableView在iOS11默认使用Self-Sizing,tableView的estimatedRowHeight.estimatedSectionHeaderHeight. estimatedSectionFooterHeight三个高度估算属性由默认的0变成了UITableViewAuto

  • iPhoneX 各种适配记录笔记（超全面）

    iPhoneX 各种适配记录笔记（超全面）

    前言 与以往的iPhone不同,这次iPhone X用上了时下流行的全面屏设计,屏幕的分辨率和比例都是苹果首次采用,而且还有个"别致的刘海",这就需要现有的APP为iPhone X重新作适配了. 所以iPhone X 的到来,惊艳的是果粉,苦逼的是程序猿.今天升级到Xcode9.0,运行项目,所谓的全屏 iPhone X,but 页面好像也没有全屏,于是根据之前的适配经验,总算初步解决了这个问题,记录如下,以备后需. App 页面适配适配前 适配前 问题:App 未全屏显示 解决办法

  • iOS 11 safeArea详解及iphoneX 适配

    iOS 11 safeArea详解及iphoneX 适配

    最近看了许多iPhone X适配的文章,发现很少有介绍safeArea的,就来随便写写 现在对于iPhone X的适配,有一种常见的做法是给导航栏或tabbar增加一个固定的距离,比如顶部增加44pt,底部增加34pt.这种写死距离的做法乍看上去挺简单,其实并不好,理由如下 不适合多机型的适配,如果以后出了一种带刘海的iPad,需要预留出来的距离就未必是现在写死的距离 不适合需要支持横竖屏的app,横屏顶部不需要增加距离,反而是左右各有44pt,底部的距离也和竖屏不同 不够动态.还是举个例子,假

  • iPhoneX 序列适配方案(小结)

    和往常一样,苹果发布新产品,我们作为开发者都需要对系统和UI布局进行适配,今年也是一样.从去年发布的 iphoneX开始,iPhone 手机加入了刘海设计,而且针对于iphone的刘海,需要特殊的适配.今年新出的3款iphone都带有刘海,自然也不例外. 在iphonex以前iphone的顶部导航栏高度都是统一的64,底部导航栏是统一的49:从iphonex的刘海屏开始,出了一个SafeArea的概念,带刘海设计的iphone,顶部导航的高度由原来的64,变成了88,因为状态栏的高度由原来的20

  • webpack的移动端适配方案小结

    目录 rem vw 适配第三方UI框架 结语 在移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度.目前比较常见的适配方案有rem和vw,它们都是css中的相对单位. rem W3C对rem的定义是 font-size of the root element,它是一个只相对于浏览器的根元素(HTML元素)的font-size的来确定的单位,也就是说对于不同宽度的机型,我们只需要计算出对应的根元素的字体大小,用同样的css代码可以实现等比适配.考虑最简单的情况: html代码片段 //移动

  • 基于rem的移动端响应式适配方案(详解)

    基于rem的移动端响应式适配方案(详解)

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

  • MySQL实现类似Oracle序列的方案

    MySQL实现类似Oracle的序列 Oracle一般使用序列(Sequence)来处理主键字段,而MySQL则提供了自增长(increment)来实现类似的目的: 但在实际使用过程中发现,MySQL的自增长有诸多的弊端:不能控制步长.开始索引.是否循环等:若需要迁移数据库,则对于主键这块,也是个头大的问题. 本文记录了一个模拟Oracle序列的方案,重点是想法,代码其次. Oracle序列的使用,无非是使用.nextval和.currval伪列,基本想法是: 1.MySQL中新建表,用于存储序

  • Vue头像处理方案小结

    个人思路 获取后台返回头像url,判断图片宽度,高度. 如果宽度>高度, 使其高度填充盒子 两边留白. 如果宽度<高度,使得宽度填充盒子 上下留白. 效果图: 缺陷:懒加载图片 会出现闪烁 代码实现 <template> // 外面要给一个div并且限制宽度和高度,text-align center,overflow hidden <div class="head"> // userInfoList.avatar 是后台返回给我的头像URL <

  • 详解基于Vue/React项目的移动端适配方案

    详解基于Vue/React项目的移动端适配方案

    前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的

  • iOS13即将到来，iOS推送DeviceToken适配方案详解

    iOS13即将到来，iOS推送DeviceToken适配方案详解

    随着苹果iOS13系统即将发布,个推提前推出DeviceToken适配方案,以确保新版本的兼容与APP推送服务的正常使用.iOS13的一个重要变化是"[deviceToken description]" 会受不同运行环境及系统的影响而发生变化,如果未及时做好适配工作,会导致SDK绑定到错误的DeviceToken,从而影响APN推送.请各位开发者根据当前运行环境做出相应的更新与优化,以保障用户在iOS13系统上有更好的使用体验. 在Xcode11.iOS13运行时"[devi

  • flexible.js实现移动端rem适配方案

    需要了解的基础知识: 物理像素:物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 设备独立像素:也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素. 设备像素比:简称为dpr,其定义了物理像素和设备独立像素的对应关系.它的值可以按此公式计算得到:设备像素比 ＝ 物理像素 / 设备独立像素

  • IOS 屏幕适配方案实现缩放window的示例代码

    背景: 公司有个iPad项目(只支持横屏),是11年开发的,那时的iPad只有1024x768的分辨率,所以没有屏幕适配的问题,frame都是写死的.后来不同尺寸的iPad相继出现,本来应该会出现屏幕不能适配的问题,但是由于该项目没有设置启动图,页面会自动等比例缩放撑满整个屏幕,各分辨率的宽高比相差不多,所以并没有出现太大问题.但是2020年3月4日,苹果要求所有提交至 App Store 的 app 都须使用 Xcode storyboard(故事板) 来提供 app 的启动屏幕,之前的不设置

  • Vue 打包体积优化方案小结

    Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { c

随机推荐