ios屏幕适配相关知识

适配


适配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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353