ios屏幕适配相关知识

2019-06-14  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读