iPhoneX 序列适配方案(小结)
更新时间：2018年09月25日 10:23:11 作者：蓝光95
这篇文章主要介绍了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显示不正确和事件不能够响应的情况。）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
iOS Remote Notification远程消息推送处理
这篇文章主要为大家详细介绍了iOS Remote Notification远程消息推送处理，感兴趣的小伙伴们可以参考一下2016-09-09
本篇文章主要介绍了详解iOS-按钮单选与多选逻辑处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
本篇文章主要介绍了iOS 图片加载框架SDWebImage解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
从iOS8开始,就引入了新的浏览器控件WKWebView,用于取代UIWebView,下面这篇文章主要给大家介绍了关于iOS WKWebView秒开方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
RunLoop是与线程相关的基础架构中的一部分，它是一个处理事件的循环(线程进入这个循环，运行事件处理程序来响应传入的事件)，RunLoop的目的是当有事件需要处理时，线程是活跃的、忙碌的，当没有事件后，线程进入休眠。2021-06-06
这篇文章主要介绍了浅析Objective-C中分类Category的使用,使用Category对类进行扩展可以访问原始类的实例变量,需要的朋友可以参考下2016-03-03
这篇文章主要给大家介绍了关于iOS开发教程之单例使用问题的相关资料，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于iOS如何画出精美的图表的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
下拉刷新和上拉加载更多功能是一个应用非常广泛的一个效果,最新项目中就遇到这个功能,这篇文章主要给大家介绍了关于iOS实现无感知上拉加载更多功能的思路与方法,需要的朋友可以参考下2021-07-07
ios 流媒体播放器实现流程及FreeStreamer的使用的示例
本篇文章主要介绍了ios 流媒体播放器实现流程及FreeStreamer的使用的示例代码，非常具有实用价值，需要的朋友可以参考下2018-01-01
最新评论