设备屏幕全解：设计师，你不该对你的屏幕一无所知

程序员在搭建界面的时候也会像我们设计师画图一样，首先会有一个画布，一个画布代表针对设备的一屏，程序员将会在这个画布内对界面进行搭建。针对 iPhone（6~7）而言，这个画布的最佳大小是375*667pt。下面这张图就是程序员的画布，长这样的，有点像 Sketch，注意红框里面的数字。

等等，不是说 iPhone（6~7）的分辨率是 750*1334px 吗？这个奇怪东西又是什么？这是 iPhone（6~7）的逻辑点分辨率（或称虚拟点分辨率），这个就是人们为了解决屏幕尺寸繁多而设计出来的一套机制。iOS 系统就是根据这个 375*667pt 的画布进行一个二倍放大渲染来填满 750*1334px 的屏幕的。这也是为什么那么多设计师推荐使用一倍图进行设计的原因，这样是最接近开发环境的，开发不需要换算就能直接照着你的设计稿设置各个元素的尺寸和位置。

比如说，你在 Sketch 里面使用一倍稿（375*667px 的画布）画了一颗 44*44 px 的按钮，对于开发来说，这颗按钮在画布上并不是 44px 大小，而是 44 pt。**的确，我们在输出按钮这张图的时候会输出成 88px（@2），或132px（@3）但是我们输出的只是一张 .png 的图片，是这颗按钮的“表皮”而已。**而对于开发来说，这颗按钮是一个控件，是界面的一个零部件，这个控件的大小就不能定义成几多几多 px 了，**px 是死的， pt 是活的，面对iPhone 7，44pt 将会被渲染成 88px 大小的一枚按钮，上面覆盖上了你输出的 @2.png 表皮，而面对 iPhone 7 Plus，它将会被渲染成 132px 大小的一枚按钮，上面覆盖上了你输出的 @3.png 表皮。**系统是以这样的机制，来保证能够使用一个布局文件来对不同分辨率、不同 PPI 的屏幕进行尽量正确的布局。

DP 或 DiP 也差不多是这个道理，只不过这个单位用于安卓开发。

SP 是 Scale-independent pixels 的缩写，大意是可放大像素的意思，这个单位多用在安卓设备的字体大小上面。它跟 DP、 PT 的概念差不多，能够面对不同的屏幕尺寸渲染出大小适合文字。

此处只以 iPhone（6~7）来举例，其实其他设备也是这个原理，包括电脑、手机、平板电脑、甚至是智能手表。

跑 iOS 的设备主要两种，iPhone 和 iPad。（iPod thouch就不讨论了，基本上跟 iPhone 一样。）

iPhone 方面我们从非 retina 显示屏的 iPhone3G/S 讲到 iPhone 7/Plus。

关于 Plus 机型，不得不仔细说说它的一个小特点。

在 iPhone 6/7 上，系统会根据 350*667pt 的逻辑画布进行一个二倍渲染，变成 750*1334 之后再将界面投射到屏幕上面去。Plus 机型也差不多，它的逻辑画布的最佳大小是 414*736pt（由于与非 Plus 机型的逻辑分辨率并不太悬殊，所以平时我们只是用一倍画稿进行设计也没有产生太大的问题，误差将由程序员使用一些技术上的布局手段减小） 然后系统进行了一次三倍的渲染变为 1242*2208px。但 Plus 机型的分辨率是 1080*1920px 的，逻辑画布渲染出来的大小怎么跟这个不一样，那还怎么准确投射，充满整个屏幕啊！

在 Plus 机型上，渲染出来的 1242*2208px 会先降低采样变成 1080*1920px 然后再投射到屏幕上面去。我们还是来看图吧。

1080*1920px 相较于 1242*2208px 大约缩小了 15%，那么很多尺寸都会出现小数，比如说 131.3244px 这样恶心数字，出现小数的话图片的边缘就会出现模糊的状况，而 Plus 机型上几乎所有图片都不是整数的，但得益于高分辨率的 retina 显示屏，我们的肉眼可能看不出来端倪（凑近一点看的话有可能能够看得出来大家不妨试试）。绝大部分情况下 Plus 的降低采样机制不会对我们的设计造成什么太过巨大的影响，记得输出 @3X 图即可，不过要说的是，越是细小的元素影响就会越大。

iPad 方面我们从非 retina 显示屏的第一代 iPad 到想要代替电脑的 12.9寸的 iPad Pro 再到 iPad mini 1/2/3/4。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!