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显示不正确和事件不能够响应的情况。）

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