17

适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr屏幕尺寸及安全区域

 4 years ago
source link: https://gsl201600.github.io/2020/12/30/%E9%80%82%E9%85%8DiPhoneXiPhoneXsiPhoneXsMaxiPhoneXr%E5%B1%8F%E5%B9%95%E5%B0%BA%E5%AF%B8%E5%8F%8A%E5%AE%89%E5%85%A8%E5%8C%BA%E5%9F%9F/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
2020-12-30 • 于 代码库 阅读 2

适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr屏幕尺寸及安全区域

  1. 先来认识pxpt区别
    px就是表示pixel像素,是屏幕上显示数据的最基本的点,它不是自然界的长度单位,点的大小是会变的,也称为相对长度
    pt就是point,是印刷行业常用单位,等于1/72英寸,所以它是一个自然界标准的长度单位,也称为绝对长度

  2. 我们再来了解缩放因子(scale factor between logic point and device pixel)
    早期的iPhone3GS的屏幕分辨率是320*480(PPI=163)iOS绘制图形(CGPoint/CGSize/CGRect)均以point为单位:1 point = 1 pixel
    后来在iPhone4中,同样大小3.5 inch的屏幕采用了Retina显示技术,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326)显像分辨率提升至iPhone3GS4倍1个Point被渲染成1个2x2的像素矩阵
    但是对于开发者来说,iOS绘制图形的API依然沿袭point为单位。在同样的逻辑坐标系下:1 point = scale*pixel(在iPhone4~6中,缩放因子scale=2;在iPhone6+中,缩放因子scale=3

  3. iPhone 各种机型尺寸信息列表入下表:

机型 尺寸 逻辑缩放因子(UIKit Scale factor) 实际缩放因子(Native Scale factor) 屏幕宽高(开发尺寸) 屏幕分辨率 是否全面屏 有无刘海 3GS 3.5寸 1.0 1.0 320x480 320x480 非全面屏 无 4(S) 3.5寸 2.0 2.0 320x480 640x960 非全面屏 无 5(C)/5(S)/SE 4寸 2.0 2.0 320x568 640x1136 非全面屏 无 6(S)/7/8 4.7寸 2.0 2.0 375x667 750x1334 非全面屏 无 6(S)+/7+/8+ 5.5寸 3.0 2.608 414x736 1080x1920 非全面屏 无 X/XS 5.8寸 3.0 3.0 375x812 1125x2436 全面屏 有 XR 6.1寸 2.0 2.0 414×896 828 x1792 全面屏 有 XS Max 6.5寸 3.0 3.0 414×896 1242x2688 全面屏 有

需要注意的地方是6(S)+/7+/8+的时候,实际的缩放因子并不等于逻辑上的缩放因子。所以,他的屏幕分辨率是1080x1920而不是1242x2208
上述数据,可以通过代码获取逻辑缩放因子、逻辑屏幕宽度;实际缩放/物理因子、实际/物理屏幕宽度:

//逻辑缩放因子
[UIScreen mainScreen].scale
//逻辑屏幕宽度
[UIScreen mainScreen].bounds

//实际/物理缩放因子
[UIScreen mainScreen].nativeScale
//实际/物理屏幕宽度
[UIScreen mainScreen].nativeBounds
  1. 适配常用宏
    //获得屏幕的宽高
    #define kScreenWidth [UIScreen mainScreen].bounds.size.width
    #define kScreenHeight [UIScreen mainScreen].bounds.size.height
    //iPhoneX / iPhoneXS
    #define isIphoneX_XS kScreenWidth == 375.f && kScreenHeight == 812.f ? YES : NO
    //iPhoneXR / iPhoneXSMax
    #define isIphoneXR_XSMax kScreenWidth == 414.f && kScreenHeight == 896.f ? YES : NO
    //异性全面屏
    #define isFullScreen isIphoneX_XS || isIphoneXR_XSMax

    // Status bar height.
    #define StatusBarHeight isFullScreen ? 44.f : 20.f

    // Navigation bar height.
    #define NavigationBarHeight 44.f

    // Tabbar height.
    #define TabbarHeight isFullScreen ? (49.f+34.f) : 49.f

    // Tabbar safe bottom margin.
    #define TabbarSafeBottomMargin isFullScreen ? 34.f : 0.f

    // Status bar & navigation bar height.
    #define StatusBarAndNavigationBarHeight isFullScreen ? 88.f : 64.f
  2. 获取安全区域
    + (CGRect)GetSafeAreaImpl{
    UIView *view = UIApplication.sharedApplication.windows.lastObject;
    // UIView *view = (UIView *)GetAppController().unityView;
    CGRect area = [self CustomComputeSafeArea:view];
    // x = area.origin.x;
    // y = area.origin.y;
    // w = area.size.width;
    // h = area.size.height;
    return area;
    }

    + (CGRect)CustomComputeSafeArea:(UIView *)view{
    CGSize screenSize = view.bounds.size;
    CGRect screenRect = CGRectMake(0, 0, screenSize.width, screenSize.height);

    UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, 0, 0);
    if (@available(iOS 11.0, *)) {
    insets = [view safeAreaInsets];
    }
    screenRect.origin.x = screenRect.origin.x + insets.left;
    screenRect.origin.y = screenRect.origin.y + insets.top;
    // screenRect.size.width -= insets.left + insets.right;
    screenRect.size.width = screenRect.size.width - (insets.left + insets.right);
    screenRect.size.height = screenRect.size.height - (insets.top + insets.bottom);
    // 乘以缩放因子,根据需求可以省略
    float scale = view.contentScaleFactor;
    screenRect.origin.x = screenRect.origin.x * scale;
    screenRect.origin.y = screenRect.origin.y * scale;
    screenRect.size.width = screenRect.size.width * scale;
    screenRect.size.height = screenRect.size.height * scale;
    return screenRect;
    }
  3. 启动图数据
    1240

  4. 有刘海机型安全区域,有无刘海机型开发尺寸对比图
    刘海机型安全区域
    刘海机型开发尺寸
    非刘海机型开发尺寸

-------------本文结束感谢您的阅读-------------

Recommend

  • 175
    • www.cocoachina.com 7 years ago
    • Cache

    iOS11&iPhoneX适配&Xcode9打包注意事项

    website upgrading…

  • 100

    苹果公司于9月份如期发布了新的iPhone-iPhone8,iPhone8 Plus,iPhoneX,前两个不用多说,正常形态的iPhone和前代外观上没有太大区别。iPhoneX则带来了不同的样式,不同的体验,18:9的全面屏屏幕,小刘海,去掉Home键后超前的交互方式。当然对于开发者也带来了对于...

  • 117

    前言iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定...

  • 26

    问与答 - @powerxu - 512G 1.2W+这么贵真的会有弱智买嘛?都赶上电脑了

  • 41

    细数苹果发布会的套路,为了让你剁手都用了那些手段?

  • 45
    • www.jisilu.cn 6 years ago
    • Cache

    iphoneXS发布了,毫无购买欲望

    iphoneXS发布了,毫无购买欲望 - 今年毫无创新的一代,挤挤牙膏又一年,仍然印堂一条大黑线,撅起的摄像头;完全比不上众安卓旗舰机(华为、三星、小米)的美感与功能。AAPL应声大跌。

  • 85
    • www.v2ex.com 6 years ago
    • Cache

    现在该入手 iphoneXS 吗?

    2018 - @zhangZMZ - 子弹早已备好,但是现在 iphone 的性价比真的低。价格高(不清楚是否和中美贸易战有关),而且还没有亮眼的创新点。但是手里一台 iphone 都没有,X 又有点太旧了。纠结!

  • 35
    • www.cocoachina.com 6 years ago
    • Cache

    适配iPhoneX全系详解,更新Xcode10爬坑

    熬夜看了WWDC2018, 为了坚决响应苹果号召, 迅速贯彻落实iOS12的新系统, 公司组织决定让我作为一个排头兵, 更新Xcode10, 看看苹果的新思想, 新作为.

  • 232

    前言: 现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。

  • 5

    求建议)iphoneXS max全新3300可以入手吗 [复制链接] 分享: 楼主...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK