5072人阅读
iOS开发如何标准化的适应新的iPhone 5s/iPhone6/6 Plus，是否有一种一劳永逸的解决方法？而不需要设计师针对不同的尺寸单独进行设计？
----------------------------------------
初代iPhone
2007年，初代iPhone发布，屏幕的宽高是 320 x 480 像素。下文也是按照宽度，高度的顺序排列。这个分辨率一直到iPhone 3GS也保持不变。
那时编写iOS的App(应用程序)，只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50)，就表示它的宽度是40像素，高度是50像素，放在(20, 20)像素的位置。
2010年，iPhone 4发布，率先采用Retina显示屏，在屏幕的物理尺寸不变的情况下，像素成倍增加，达到 640 x 960 像素。
这样就出现一个问题，怎么让原有的App运行在新的手机上面？iPhone手机一个优势，就是有众多优秀的App，假如不兼容原有的App，就相当于放弃这个得来不易的优势，是很不明智的。
每当iPhone的屏幕有所变化，比如iPhone 3GS过渡到iPhone 4, iPhone 4过渡到iPhone 5, iPhone 5过渡到iPhone 6，苹果公司都需要想办法来解决上述的兼容问题。
为了运行之前的App，引入一个新的概念point(点)。点这个概念在iOS开发中十分重要，而实际用户很少关注。iPhone 4屏幕尺寸继续保持320 x 480，不过单位并非是像素，而是点。
这篇文章中，我将点和像素当成一维的长度单位，而非二维的面积单位，这样对于我来说更自然些，因此1个点等于2个像素。别的文章中可能会说1个点等于4个像素，其实是指1个点占据了4个像素的面积，这样也没有说错，注意上下文语境。
iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的，都是3.5英寸。同样一个点，实际尺寸看起来是一样的。只是iPhone 4在单位英寸上像素更多，看起来更细腻。
开发iOS的时候，使用点作为基本单位会更加方便。列表对比
这里的屏幕模式可以初步理解成，一个点等于多少个像素。2x，就是1个点等于2个像素。
总结一下单位
每英寸有多少个像素，称为ppi(pixel per inch)。iPhone 4的屏幕是640 x 960像素，3.5英寸，我们没有宽高的实际尺寸，就按照对角线来粗略计算它的ppi。将像素当做长度单位，根据勾股定理，对角线就是1154像素。屏幕对角线的实际长度为3.5英寸，也就是1154像素除以3.5英寸，得出330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。
iPhone 4之后(x, y, width, height) = (20, 30, 40, 50)，就表示高度为40个点，宽度为50个点，放在(20, 20)个点的位置。这种处理方法，将之前以像素作为单位自动转换成以点作为单位，使得iPhone 3GS的应用程序，不用修改也可运行在iPhone 4上面。
文字，颜色等是矢量数据，放大不会失真。原有的iPhone 3GS程序，在iPhone 4上面运行，文字显示也十分清晰。
而图片并非矢量数据，处理方式有所不同。假设图片 example.png，大小为 30 x 40像素（这里的单位是像素，数字图片的单位通常都为像素）。当这张example.png在iPhone 3GS和iPhone 4中使用时候，都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素，也就是30 x 40像素的图片，占据了60 x 80像素的屏幕，因此这图片在iPhone 4中看起来就会模糊。
开发的时候，为使得图片清晰，需要进行图片适配。这时需要准备两张内容相同的图片，放在同一目录下。
example.png
// 30 x 40像素
example@2x.png
// 60 x 80像素
当程序中使用example.png的时候，会根据屏幕模式自动选择对应的图片。屏幕1x模式，就会选择example.png, 2x模式就会优先选择example@2x.png，假如example@2x.png不存在，就选择example.png。
图片跟屏幕一样，也有1x模式，2x模式。在iPhone 6 Plus中，还出现3x模式，原理是一样的。
当iPhone 4选中example@2x.png的图片，就会生成一张大小为30 x 40个点，2x模式的图片。这个时候，图片看起来就会很清晰了。而没有适配的旧程序，example@2x.png不存在，就选中example.png，生成大小为30 x 40个点，1x模式的图片，看起来比较模糊。但它们占据的屏幕点数是一样的。
2012年，苹果发布iPhone 5。我们将所有机型对比，依然采用点作为单位。
跟iPhone 4做比较, iPhone 5的宽度保持不变。高度增加568 - 480 = 88个点。
在iOS开发中，44这个数字比较特殊。iOS界面指南写着，人类的手指有一定大小，点击区域低于44个点的时候，就难以点中。44的两倍就是88。
当原有程序没有适配iPhone 5的时候，也可以正常运行，但多出来的88个点将会将会被自动均分为上下两部分，使得上下出现黑边。我找不到好看的图片。
那么怎样才能告诉iOS系统，应用程序已经适配了iPhone 5呢？在这里，我们先扯开一下，谈一下启动图片。
点击主屏幕的图标，进入App的时候，会立即显示一张图片，这张图片就是启动图片(Launch Image)。App在正式启动的时需要做一些初始化处理，这通常比较费时。先出现启动图片，可以使用户觉得系统立即有响应，减少等待的焦虑感。
每个机型，比如同时支持iPhone和iPad的程序，需要分别为iPhone跟iPad指定启动图片。当旧的iPhone 4的程序，运行在iPhone 5上面，没有iPhone 5的启动图片，就采用兼容模式，上下留黑边。当为iPhone 5指定了新的启动图片，系统就认为这个应用程序是已经适配了iPhone 5的，上下就不会留黑边了。下面是微信启动图片，应该都很熟悉了。
微信启动图片中出现的那个地球，叫蓝色弹珠（The Blue Marble），是在日由阿波罗17号太空船的船员所拍摄的。这张照片当年很震撼，是普通人第一次可以通过照片直接看到地球的全貌。见问题
微信的启动图，为适配iPhone 5，相比与iPhone 4, 很明显狭长了。
典型iPhone应用程序（游戏除外），很多是上面一个导航栏，下面一个工具栏或者标签栏, 中间一大块用于显示的内容区。iPhone 5拉长了，对于程序的适配，也不算麻烦，内容区的内容基本是动态生成的。适配时候可以简单上下不变，中间的内容区拉长就行了。注意，导航栏和工具栏的高度也是44个点。下面是同一程序，在iPhone 4跟iPhone 5的对比。
AutoLayout
到了这个时候，传统绝对定位的弱点就显露出来了。这时iPhone按照点作为单位，已经出现了两种不同尺寸的屏幕，算上iPad, 就有3种尺寸（有些App可以同时兼容iPhone和iPad，称为Universal）。
从iOS 6系统发布后，iOS开发中可以采用一种AutoLayout的技术。AutoLayout就像网页一样，指定View，Button，Text之间的相对位置，比如靠左多少，靠右多少，居中多少等等。举个例子，像下面的简单布局。
假设左上角的区域为view1, 右上角的区域为view2, 下面的区域为view3。AutoLayout会说:
view1.left = 20
// View1的左边距离边界20个点
view1.top = 20
// View1的上边距离边界20个点
view2.right = 20
// View2的右边距离边界20个点
view2.top = 20
// View2的上边距离边界20个点
view2.left = view1.right + 20 // View2的左边距离View1右边20个点
view2.width = view1.width
// View1的宽度等于View2的宽度
view2.height = view1.height
// view1高度等于view2高度
view3.left = view1.left
// view3的跟view1左对齐
view3.right = view2.right
// view3跟view2右对齐
view3.top = view1.bottom + 20 // view3的上边距离view1下边20个点
view3.bottom = 20
// view3下边距离边界20个点
view3.height = view1.height
// view3高度等于view1高度
指定上面的约束条件后，AutoLayout就会自动算出对应的布局。上面我写得比较繁琐，事实上很多操作都是可以使用鼠标拖拉来指定的，并不一定需要使用代码。但就算用代码，也有简写的方法。下面是在xib中，拖拉鼠标指定约束时的界面。
而绝对定位，会直接说
view1.frame = (x1, y1, width1, height1)
view2.frame = (x2, y2, width2, height2)
view3.frame = (x3, y3, width3, height3)
绝对定位并非指定约束条件，而是开发者自己来精确指定View，Button, Text等的实际坐标大小。
对于一个屏幕，绝对定位可能跟AutoLayout的区别不算大，甚至绝对定位会更方便些。但当需要同时适配多个屏幕，AutoLayout根本不需要更改。而绝对定位就需要根据屏幕大小，一个个算出来。比如横屏，在AutoLayout下面，就自动变成。
这里不过是3个控件的布局，当出现的控件数越多，屏幕尺寸越多，AutoLayout的优势就显露出来了。另外AutoLayout有个好处是容易支持多语言，不同语言下，同一个意思文字的长度是不同的，使用AutoLayout也可以自动适配。
在iOS 6的时候，AutoLayout还比较少人使用，当时屏幕尺寸还比较少。iOS 7的时候，就开始很多人使用了。而到现在iOS 8了, 更加上iPhone 6, iPhone 6 Plus需要适配，AutoLayout大势所趋，不用不行了。
iPhone 6, iPhone 6 Plus
2014年，iPhone 6, iPhone 6 Plus发布后，情况又有新的变化。再次比较所有iPhone机型。
屏幕尺寸再度分裂。但是我们比较iPhone
5 跟 iPhone 6的宽高比例。
可以看出，iPhone 6跟iPhone 5虽然屏幕尺寸改变了，但是它们的比例是不变的。都是 9 ÷ 16 = 0.5625 的屏幕。
当旧的iPhone 5程序运行在iPhone 6上面，假如没有经过适配。旧程序自动等比放大，铺满新手机，旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了，整体看起来有点虚，也不能更好利用大屏空间。
当需要开发者手动适配的时候，跟iPhone 4过渡到iPhone 5一样，在新程序中，指定一张新的启动图片。当指定了启动图，屏幕分辨率就已经变成应有的大小，这时候利用AutoLayout进行布局，同一份代码，就可以支持多个机型。新手机的屏幕更大，有更多的虚拟点，可以显示更多的内容。
值得注意一点是，iPhone 6 Plus。它的宽高是414 × 736个点，3x模式，理想上来说，应该有1242 × 2208像素。但iPhone 6 Plus的实际像素是 1080 × 1920，是比理想值要少一点的。iPhone 6 Plus的处理方式是将程序整体稍微缩小一点。分辨率很高，这点区别，实际上也看不出来。
那为什么需要这样做呢？上面表格中iPhone 6, iPhone 6 Plus屏幕宽高的逻辑点的数字是怎么来的？下面我猜测一下原因，但不能证实。
先看iPhone 6，这个比较简单。iPhone 6的屏幕宽高比例跟iPhone 5一样，使用对角线来计算，就是放大了4.7 ÷ 4 = 1.175倍。用这个数字，乘以iPhone 5的320 x 568个点，忽略误差，差不多就是iPhone 6屏幕的375 x 667个点。这里需要注意，屏幕宽高比例一样，才能使用对角线来计算。
按照上面的方式来计算iPhone 6 Plus, 应该是得到440 x 781个点，实际上却是414 × 736个点。这里我猜测是因为，iPhone 6 Plus屏幕明显更大，相同尺寸的点放在大的屏幕上面，会使得人感觉尺寸变小，所以就将每个点的实际尺寸放大一些，从而得到更少的点数目。人眼看东西会有种错觉，并非是孤立的看的，而是跟周围的环境作比较。
确定了点数目之后，再确定了像素1080 × 1920(很多高清电视就是这个尺寸)，应该是.6x，但2.6x这个数字开发就太麻烦了，就按照3x来处理。其实假如像素达到1242 × 2208，3x下也可以精确到1:1, 这样会更好。但现今的技术在考虑电池，处理器，屏幕尺寸等综合因素下，很可能达不到这样的细腻程度。
上述只是猜测，我相信那些手机参数是经过反复考虑再确定的。iPhone 6 Plus这个处于手机跟平板中间地带的产物经过不少特殊处理。
由分析可以看到，慢慢的为了适配多个机型，程序的启动图片也逐渐增多，为解决这个问题。iOS之后，可以使用xib来搭建启动界面，这样就可以同一个启动界面，适配多个机型，减少启动图片占用的空间。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：464456次
积分：6204
积分：6204
排名：第1696名
原创：41篇
转载：749篇
评论：35条
(6)(43)(3)(4)(11)(5)(3)(2)(7)(2)(4)(39)(60)(24)(86)(119)(92)(2)(2)(2)(1)(5)(18)(3)(17)(20)(97)(59)(35)(20)(1)苹果6plus手机更新后显示无服务,换卡重启也没有用，等再次更新会好吗？苹果6plus多久有更新_百度知道
苹果6plus手机更新后显示无服务,换卡重启也没有用，等再次更新会好吗？苹果6plus多久有更新
我有更好的答案
你更新到了什么系统
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁苹果6plus手机卡怎么显示英文名称_百度知道
苹果6plus手机卡怎么显示英文名称
“设置”-“邮件、通讯录，方法如下，要把SIM卡中的通讯录导入到苹果手机中苹果手机不能直接读取SIM卡中的通讯录
其他类似问题
为您推荐：
手机卡的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁苹果6plus恢复出厂设置变成英文了，换成中文怎么换，谢谢_百度知道
苹果6plus恢复出厂设置变成英文了，换成中文怎么换，谢谢
setting（齿轮图标），进去language，选“简体中文”或Chinese
其他类似问题
为您推荐：
恢复出厂设置的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁iPhone6 Plus字体如何改？
　　其实，iPhone6
Plus修改字体也不难，不过需要一个前提，就是你的手机已经越狱了，如果还没有越狱的话，就只能sorry了。越狱了的话，打开并进入Cydia越狱应用中心，在搜索中搜索字体，即可有相关的字体插件。安装好字体插件以后，就可以为手机更换字体了。　　当然了，换字体之前，请先为你的iPhone6 Plus备份好原先的字体，不然万一不小心出了问题，没了系统字体可就麻烦了。下面分享一个iPhone6
Plus字体怎么改的具体方法步骤：　　1、打开cydia---搜索---bytaFont2---安装。　　2、添加178源，找到华康少女英文字体，下载安装。(温馨提示一下，文件较大，到wifi稳定的环境下载)　　3、再找到华康少女中文字体，下载安装。(温馨提示以下，文件较大，到wifi稳定的环境下载)　　4、回到桌面，打开bytaFont2&&全局替换。选择第二个，点击是。　　5、手机重启后，再打开bytaFont2&&更多&&中文/韩文字体&&安装华康少女&&中文简体&&点击是，手机重启。 　　6、完成。没有方块。完美支持。没有白苹果，暂时没发现有程序闪退。