UI适配的三个参数
1.渲染像素--屏幕截图的图片尺寸,单位px
2.逻辑像素--程序员开发所用尺寸,单位pt
3.倍率--渲染像素/逻辑像素,得到倍数关系。常见倍率@2x,@3x
iPhone全家福
文章图片
iPhone全家福 两种宽度、四种高度
通过友盟关于iOS屏幕分辨率活跃度占比分析,640 * 960的活跃度跌破10%。
如果除去640 * 1136,iPhone在逻辑像素层面,只剩余两种宽度、四种高度
宽度*高度 | 机型 |
---|---|
320*480(占比很少) | iPhone3GS、4、4s |
320*568(占比很少) | iPhone5、5c、5s、SE |
375*667 | iPhone6、6s、7、8(6系列) |
375*812 | iPhoneX、XS |
414*736 | iPhone6/6s/7/8 Plus(Plus系列) |
414*896 | iPhoneXS Max、XR |
文章图片
两种宽度,四种高度
文章图片
iPhone X与iPhone XS
文章图片
iPhone XR与iPhone XS Max
文章图片
Plus系列与iPhone XS Max 倍率
iPhone主要机型的倍率为@2x,@3x
倍率 | 机型 |
---|---|
1x | iPhone3GS |
2x | iPhone4、4s、5、5c、5s、SE、6、6s、7、8、XR |
3x | iPhone6/6s/7/8 Plus、X、XS、XS Max |
iPhoneX、iPhoneXS、XS Max、XR都采用了全面屏设计,之前的机型则为非全面屏
全面屏 | 机型 |
---|---|
否 | iPhone3GS、4、4s、5、5c、5s、SE、6、6s、7、8、iPhone6/6s/7/8 Plus |
是 | iPhoneX、XS、XS Max、XR |
非全面屏的安全区域为可视区域,全面屏上下有两个区域为非安全区
1.页面内容不能超出安全区(Safe Area)
2.底部区域用于手势进入主屏或切换应用,如果将触发交互行为的按钮放在屏幕的底部,会破坏App操作体验
文章图片
全面屏与非全面屏 全面屏安全区的计算方式:
文章图片
iPhone 6系列与iPhone XR
文章图片
iPhone X与iPhone XS Max
文章图片
安全区域计算方式 常用宏 OC版本
// 判断是否是ipad
#define isPad ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)
// 判断iPhone4系列
#define kiPhone4 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(640, 960), [[UIScreen mainScreen] currentMode].size) : NO)
// 判断iPhone5系列
#define kiPhone5 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(640, 1136), [[UIScreen mainScreen] currentMode].size) : NO)
// 判断iPhone6系列
#define kiPhone6 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(750, 1334), [[UIScreen mainScreen] currentMode].size) : NO)
//判断iphone6+系列
#define kiPhone6Plus ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1242, 2208), [[UIScreen mainScreen] currentMode].size) : NO)// 判断iPHoneXR
#define IS_IPHONE_XR ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(828, 1792), [[UIScreen mainScreen] currentMode].size) : NO)
// 判断iPhoneX/XS
#define IS_IPHONE_XS ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)
// 判断iPhoneXS Max
#define IS_IPHONE_XS_Max ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1242, 2688), [[UIScreen mainScreen] currentMode].size) : NO)
// 判断iPhone X系列
//#define IS_IPHONE_Series IS_IPHONE_XR || IS_IPHONE_XS || IS_IPHONE_XS_Max
#define IS_IPHONE_Series [UIScreen mainScreen].bounds.size.height >= 812.0#define Height_StatusBar (IS_IPHONE_Series ? 44.0 : 20.0)
#define Height_NavBar (IS_IPHONE_Series ? 88.0 : 64.0)
#define Height_TabBar (IS_IPHONE_Series ? 83.0 : 49.0)
【iOS12|iOS12 UI适配】Swift版本
public let kDevice_iPhone4 = CGSize.init(width: 640, height: 960).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)
public let kDevice_iPhone5 = CGSize.init(width: 640, height: 1136).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)
public let kDevice_iPhone6 = CGSize.init(width: 750, height: 1334).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)
public let kDevice_iPhone6_Plus = CGSize.init(width: 1242, height: 2208).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)public let kDevice_iPhoneXR = CGSize.init(width: 828, height: 1792).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)
public let kDevice_iPhoneXS = CGSize.init(width: 1125, height: 2436).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)
public let kDevice_iPhoneXS_Max = CGSize.init(width: 1242, height: 2688).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)
//public let kDevice_iPhoneX_Series = kDevice_iPhoneXR || kDevice_iPhoneXS || kDevice_iPhoneXS_Max
public let kDevice_iPhoneX_Series = UIScreen.main.bounds.size.height >= 812.0public let Height_StatusBar = (kDevice_iPhoneX_Series ? 44.0 : 20.0)
public let Height_NavBar = (kDevice_iPhoneX_Series ? 88.0 : 64.0)
public let Height_TabBar = (kDevice_iPhoneX_Series ? 83.0 : 49.0)