iPhoneX 序列适配方案(小结)
2018-09-25 10:23
519 查看
和往常一样,苹果发布新产品,我们作为开发者都需要对系统和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 AutoLayout自动布局中级开发教程(6)-淘宝客户端iPhone 6/6 Plus 设计·适配方案
- UIScrollview在 iOS 11和iPhone X上偏移的两套完美适配方案
- iPhone 6 / 6 Plus 设计·适配方案
- Android适配方案小结(一)
- iPhone 6 / 6 Plus 设计·适配方案
- iPhone 6 / 6 Plus 设计·适配方案
- iPhoneX无导航栏页面适配问题解决方案
- iPhone 6 / 6 Plus 设计·适配方案
- iPhone/iOS开启个人热点的纵向适配小结
- iPhone/iOS开启个人热点的纵向适配小结
- iPhone 6 / 6 Plus 设计·适配方案(真正版)
- iphone-6-6-plus-设计·适配方案(转)
- iPhone 6 / 6 Plus 设计·适配方案
- iPhone 6 / 6 Plus 设计·适配方案
- iPhone 6 / 6 Plus 设计·适配方案
- Android适配方案小结(三)
- iPhone 6 / 6 Plus 设计·适配方案
- iPhone 6 / 6 Plus 设计·适配方案
- iPhone 6 / 6 Plus 设计·适配方案
- 微信小程序中吸底按钮适配iPhone X方案