iphone X系列設配屏幕適配

時間 2019-12-06

標籤 iphone 系列屏幕適配欄目 iPhone 简体版

原文原文鏈接

截止目前，蘋果全部劉海系列的設備屏幕數據以下：react

iPhone X 、iPhone XS： 5.8英寸， 375pt * 812pt(@3x)，啓動圖1125px * 2436px
iPhone XR： 6.1英寸， 414pt * 896pt(@2x)，啓動圖828px * 1792px
iPhone XS Max: 6.5英寸， 414pt * 896pt(@3x)，啓動圖1242px * 2688px

該系列設備導航欄高度88(64), 狀態欄高度44(20), tabbar高度83(49), 其中括號中的爲非劉海系列的高度。git

對於未進行新設備屏幕尺寸適配的工程，在新設備iPhone XS Max和iPhone XR上運行，它們是以放大模式自動適配的(以iPhone X爲基準等比例放大)，此時在代碼中獲取的屏幕高度都是375pt * 812pt。github

針對這種狀況，須要配置Assets.xcassets 裏的 LaunchImage，新增兩種828px * 1792px、1242px * 2688px啓動圖便可。objective-c

對於比較新的以LaunchScreen.stroyboard爲啓動頁的，聽說是直接從新編譯工程便可。react-native

最後，對於劉海屏幕的判斷，項目中使用了兩種方式：iphone

根據屏幕寬高進行判斷:編碼

這是RN中用來判斷的代碼，使用nativeBounds是因爲它是一個跟屏幕朝向無關的數據，值恆等於屏幕portrait-up方向時的寬高。spa

static BOOL RCTIsIPhoneX() {
  static BOOL isIPhoneX = NO;
  static dispatch_once_t onceToken;

  dispatch_once(&onceToken, ^{
    CGSize screenSize = [UIScreen mainScreen].nativeBounds.size;
    CGSize iPhoneXScreenSize = CGSizeMake(1125, 2436);
    CGSize iPhoneXMaxScreenSize = CGSizeMake(1242, 2688);
    CGSize iPhoneXRScreenSize = CGSizeMake(828, 1792);

    isIPhoneX =
    CGSizeEqualToSize(screenSize, iPhoneXScreenSize) ||
    CGSizeEqualToSize(screenSize, iPhoneXMaxScreenSize) ||
    CGSizeEqualToSize(screenSize, iPhoneXRScreenSize);
  });

  return isIPhoneX;
}

經過獲取設備的device model來判斷：code

每一臺iOS設備都有對應的硬件編碼/標識符，稱爲device model 或者叫machine name，代碼以下blog

+ (NSString *)getMachine
{
	//方法一：
//    static const char MachineName[] = "hw.machine";
//    NSString* result = nil;
//    size_t size = 0;
//    if (sysctlbyname(MachineName, NULL, &size, NULL, 0) || size == 0)
//        return nil;
//    char *machine = new char[size];
//    if (sysctlbyname(MachineName, machine, &size, NULL, 0) == 0)
//        result = [NSString stringWithUTF8String:machine];
//    delete[] machine;
//    return result;

    方法二：添加了對於模擬器的支持
    static NSString *model;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{

#if TARGET_IPHONE_SIMULATOR
#ifdef DEBUG
        // 獲取模擬器所對應的 device model
        model = NSProcessInfo.processInfo.environment[@"SIMULATOR_MODEL_IDENTIFIER"];
#endif
#else
        // 獲取真機設備的 device model
        struct utsname systemInfo;
        uname(&systemInfo);
        model = [NSString stringWithCString:systemInfo.machine encoding:NSUTF8StringEncoding];
#endif
    });
    return model;
}

到此咱們就能夠根據device model來判斷是不是iPhone X了：

+ (bool) isIphoneX
{
    NSString* model = [self getMachine];
    BOOL isiPhoneX = [model isEqualToString:@"iPhone10,3"] || [model isEqualToString:@"iPhone10,6"] || [model hasPrefix:@"iPhone11,"];

    return isiPhoneX;
}

去年發佈的第一代 iPhone X 對應的 device mode 爲 iPhone10,3 和 iPhone10,6，而今年最新發布 iPhone XS 對應 iPhone11,2，iPhone XS Max 對應 iPhone11,4 和 iPhone11,6，iPhone XR 對應 iPhone11,8，完整的 device mode 數據參考這裏：https://www.theiphonewiki.com/wiki/Models

另外對於各個屏幕的分辨率，能夠參考這張圖：