iPhoneX序列适配方案(小结)

　　

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

　　

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

　　

所以对于iphonex序列的手机的适配,都需要针对顶部导航,底部导航进行适配。只不过原来判断iphonex的方法,已经不能完全判断新的iphonex新机型。要么继续加如果其他{}{}进行判断,要么就是寻找新的方法,还好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原生的适配
　　

　　 　　 　　#定义SCREEN_HEIGHTL [UIScreen mainScreen] .bounds.size.height 　　#定义SCREEN_WIDTHL [UIScreen mainScreen] .bounds.size.width 　　#定义KIsiPhoneX ((int) ((SCREEN_HEIGHTL/SCREEN_WIDTHL) * 100)==216) & # 63;是的:没有//判断是否为iPhoneXS马克斯,iPhoneXS, iPhoneXR, iPhoneX 　　 　　

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

　　 　　 　　const{宽度、高度}=Dimensions.get(“窗口”);//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序列手机的适配算法:高宽比先转换为字符串,截取前三位,转换为数字类型再乘以100 　　出口const isIphoneX=(平台。ios操作系统===' ',,((((高度/宽度)+ " ").substr (0, 4)) * 100)===216); 　　之前 　　 　　


　　

　　

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

　　

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

iPhoneX序列适配方案(小结)