美文网首页
ios屏幕适配相关知识

ios屏幕适配相关知识

作者: 云上听风 | 来源:发表于2019-06-14 13:35 被阅读0次

    适配


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

    iPhone屏幕尺寸、分辨率及适配

    屏幕逻辑分辨率和物理分辨率


    一张图帮你看懂 iPhone 6 Plus 屏幕分辨率

    所有iphone屏幕逻辑分辨率和物理分辨率:
    The Ultimate Guide To iPhone Resolutions

    从上面链接网页可以看出只有plus版本比较特殊:
    逻辑分辨率: 414 × 736
    Rendered分辨率:1242 × 2208
    实际的物理分辨率是:1080 × 1920
    而其他版本的iphone的Rendered分辨率和物理分辨率都是一致的。

    在plus中截图得到的图片分辨率是1242 × 2208,那么问题来了,要完美显示需要提供1080 × 1920还是1242 × 2208的图片呢?
    事实上,只要提供1080 × 1920的图片就可以完美显示,而如果你提供1242 × 2208的图片,系统会自动downsampling到1080 × 1920来显示。也就是说就算你提供的是1242 × 2208的图片,系统其实在显示时还是替你缩放到1080 × 1920。
    因为其他版本的scale都是1x/2x/3x,而plus按物理分辨率的scale比较奇葩是2.6,为了不给开发增加麻烦,所以苹果把scale提升到3,所以才有了1242 × 2208的Rendered分辨率,在真正显示时由系统负责缩放拉伸到1080 × 1920。

    在iphone6s plus中打印scale和nativeScale:

        NSLog(@"scale:%f, nativeScale: %f", UIScreen.mainScreen.scale, UIScreen.mainScreen.nativeScale);
    

    结果为:
    scale:3.000000, nativeScale: 2.608696

    可以看出nativeScale就是真正的scale,而scale是系统自动缩放的scale。

    iphone6sp实测显示:

    使用UIImageView载入Assets.xcassets中3x的图片,一张是1080 × 1920,命名Image1080, 一张1242 × 2208,命名Image1242。
    默认imageView.contentMode = .scaleToFill,全屏显示,此时按按钮切换两张图片,看不出来任何差别。
    当imageView.contentMode = .topLeft时,此时1242p图片可以全屏显示,但是Image1080会留有空白。
    那么也就是说为了节省资源,在plus中可以直接使用1080p的图片,但是显示时需要scale拉伸。

    分辨率统计


    参考:
    iOS(iPhone11/Pro/Max)设备的机型/尺寸/型号/代码/像素/比例

    但是这个链接中的表格关于iphone部分不全,没有逻辑分辨率和Scale,我补全了。

    所有设备型号:

    1. https://www.theiphonewiki.com/wiki/Models
    2. https://gist.github.com/adamawolf/3048717

    我总结一下:
    iphone上的比例除了上古的4及以前的机型不考虑以外,按比例的话只有两种比例:
    16:9和19.5:9,按宽度来适配,考虑好safearea,追求完美的话可以做两套设计稿,这样程序就不用考虑多出来的高度怎么处理了,直接按设计稿按比例缩放就好。

    以下表格在简书中的排版好难看,唉。

    iPhone:

    机型 逻辑分辨率 Scale 物理分辨率 比例 像素密度 屏幕尺寸 机型代码 发布日期
    iPhone 2g 480×320 @1X 480×320 3:2 163ppi 3.5 iPhone1,1 2008.01
    iPhone 3g 480×320 @1X 480×320 3:2 163ppi 3.5 iPhone1,2 2008.06
    iPhone 3gs 480×320 @1X 480×320 3:2 163ppi 3.5 iPhone2,1 2009.06
    iPhone 4 480×320 @2X 960×640 3:2 163ppi 3.5 iPhone3,1、iPhone3,2、iPhone3,3 2010.06
    iPhone 4s 480×320 @2X 960×640 3:2 326ppi 3.5 iPhone4,1 2011.10
    iPhone 5 568×320 @2X 1136×640 16:9 326ppi 4.0 iPhone5,1、iPhone5,2 2012.09
    iPhone 5c 568×320 @2X 1136×640 16:9 326ppi 4.0 iPhone5,3、iPhone5,4 2013.09
    iPhone 5s 568×320 @2X 1136×640 16:9 326ppi 4.0 iPhone6,1、iPhone6,2 2013.09
    iPhone 6 667×375 @2X 1334×750 16:9 401ppi 4.7 iPhone7,2 2014.09
    iPhone 6 plus 736×414 @3X 1920×1080 16:9 401ppi 5.5 iPhone7,1 2014.09
    iPhone 6s 667×375 @2X 1334×750 16:9 401ppi 4.7 iPhone8,2 2015.09
    iPhone 6s plus 736×414 @3X 1920×1080 16:9 401ppi 5.5 iPhone8,1 2015.09
    iPhone 5 SE 568×320 @2X 1136×640 16:9 401ppi 4.0 iPhone8,4 2016.03
    iPhone 7 667×375 @2X 1334×750 16:9 401ppi 4.7 iPhone9,1、iPhone9,3 2016.09
    iPhone 7 plus 736×414 @3X 1920×1080 16:9 401ppi 5.5 iPhone9,2、iPhone9,4 2016.09
    iPhone 8 667×375 @2X 1334×750 16:9 401ppi 4.7 iPhone10,1、iPhone10,4 2017.09
    iPhone 8 plus 736×414 @3X 1920×1080 16:9 401ppi 5.5 iPhone10,2、iPhone10,5 2017.09
    iPhone X 812×375 @3X 2436×1125 19.5:9 458ppi 5.8 iPhone10,3、iPhone10,6 2017.09
    iPhone XS 812×375 @3X 2436×1125 19.5:9 458ppi 5.8 iPhone11,2 2018.09
    iPhone XS Max 896×414 @3X 2688×1242 19.5:9 458pp i 6.5 iPhone11,4、iPhone11,6 2018.09
    iPhone XR 896×414 @2X 1792×828 19.5:9 326ppi 6.1 iPhone11,8 2018.09
    iPhone 11 896×414 @2X 1792×828 19.5:9 326ppi 6.1 iPhone12,1 2019.09
    iPhone 11 Pro 812×375 @3X 2436×1125 19.5:9 458ppi 5.8 iPhone12,3 2019.09
    iPhone 11 Pro Max 896×414 @3X 2688×1242 19.5:9 458ppi 6.5 iPhone12,5 2019.09

    iPad:

    机型 逻辑分辨率 Scale 物理分辨率 比例 像素密度 屏幕尺寸 型号代码 发布日期
    iPad 1024×768 @1x 1024×768 4:3 163ppi 9.7 iPad1,1 2010.01
    iPad 2 1024×768 @1x 1024×768 4:3 163ppi 9.7 iPad2,1、iPad2,2、iPad2,3、iPad2,4 2011.03
    iPad 3(New) 1024×768 @2x 2048×1536 4:3 264ppi 9.7 iPad3,1、iPad3,2、iPad3,3 2012.03
    iPad 4 1024×768 @2x 2048×1536 4:3 264ppi 9.7 iPad3,4、iPad3,5、iPad3,6 2012.10
    iPad 5 1024×768 @2x 2048×1536 4:3 264ppi 9.7 iPad6,11、iPad6,12 2017.03
    iPad 6 1024×768 @2x 2160×1620 4:3 264ppi 10.2 iPad7,11、iPad7,12 2019.09

    iPad Air:

    机型 逻辑分辨率 Scale 物理分辨率 比例 像素密度 屏幕尺寸 型号代码 发布日期
    iPad Air 1024×768 @2x 2048×1536 4:3 264ppi 9.7 iPad4,1、iPad4,2、iPad4,3 2013.10
    iPad Air 2 1024×768 @2x 2048×1536 4:3 264ppi 9.7 iPad5,3、iPad5,4 2014.10

    iPad Pro:

    机型 逻辑分辨率 Scale 物理分辨率 比例 像素密度 屏幕尺寸 型号代码 发布日期
    iPad Pro 12.9-inch 1366×1024 @2x 2732×2048 4:3 264ppi 12.9 iPad6,7、iPad6,8 2015.09
    iPad Pro 9.7-inch 1024×768 @2x 2048×1536 4:3 264ppi 9.7 iPad6,3、iPad6,4 2016.03
    iPad Pro 12.9-inch 2 1366×1024 @2x 2732×2048 4:3 264ppi 12.9 iPad7,1、iPad7,2 2017.5
    iPad Pro 10.5 1112×834 @2x 2224×1668 4:3 264ppi 10.5 iPad7,3、iPad7,4 2017.5

    iPad Mini:

    机型 逻辑分辨率 Scale 物理分辨率 比例 像素密度 屏幕尺寸 型号代码 发布日期
    iPad mini 1024×768 @1X 1024×768 4:3 163 7.9 iPad2,5、iPad2,6、iPad2,7 2012.10
    iPad mini 2 1024×768 @2X 2048×1536 4:3 326 7.9 iPad4,5、iPad4,6、iPad4,7 2013.10
    iPad mini 3 1024×768 @2X 2048×1536 4:3 326 7.9 iPad4,7、iPad4,8、iPad4,9 2014.10
    iPad mini 4 1024×768 @2X 2048×1536 4:3 326 7.9 iPad5,1、iPad5,2 2015.09

    iTouch:

    机型 逻辑分辨率 Scale 物理分辨率 比例 像素密度 屏幕尺寸 型号代码 发布日期
    iTouch 480*320 @1X 480*320 3:2 163ppi 3.5 iPod1,1 2007.09
    iTouch 2 480*320 @1X 480*320 3:2 163ppi 3.5 iPod2,1 2008.09
    iTouch 3 480*320 @1X 480*320 3:2 163ppi 3.5 iPod3,1 2009.09
    iTouch 4 480*320 @2X 960*640 3:2 326ppi 3.5 iPod4,1 2010.09
    iTouch 5 568*320 @2X 1136*640 16:9 326ppi 4.0 iPod5,1 2012.09
    iTouch 6 568*320 @2X 1136*640 16:9 326ppi 4.0 iPod7,1 2015.07

    相关文章

      网友评论

          本文标题:ios屏幕适配相关知识

          本文链接:https://www.haomeiwen.com/subject/ncyrxctx.html