iPhoneX 序列适配方案(小结)-6ren

iPhoneX 序列适配方案(小结)

转载作者：qq735679552 更新时间：2022-09-28 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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);