设计与开发中的尺寸问题

屏幕像素和显示像素

就显示方面而言，一块屏幕可以用对角线尺寸、高宽比和分辨率来定义。对角线长度和高宽比定义了屏幕的物理尺寸大小。在此基础上，再加上分辨率这一限制条件，就可以明确屏幕物理像素面积（边长）的大小。像素的大小进一步决定了屏幕在每一寸物理长度上所包含的像素个数，也就是PPI。若只给出屏幕尺寸，即对角线长度，比如市面上常说的5.7寸屏幕和分辨率（例如1920*1080）两个限制条件。则可定义

• 屏幕像素：

  
  PPI定义.png

• 显示像素：
  如果输出设备的基本单元也是像素（物理像素），那么不管是电脑、手机、平板、手表；在100%的缩放率下，图像数据是一一对应显示的。图像放大，则按照一定的算法是对图像进行像素填充，以达到想要目标大小。缩小，同样是按照一定的算法对原图像进行一些删减，最终用目标大小的尺寸来展示图像。一般来说，同一个UI元素在高像素密度的屏幕上，尺寸较小；在低像素密度的屏幕上，尺寸较大。

• 相关定义：

英寸(inch)是英国(英联邦)及其前殖民地的长度单位，1in=2.54cm.

Android中对尺寸问题的处理

• dp (Density-independent pixels)，是一种独立于像素的计量单位。dp是一种灵活计量单位，Google规定1dp等于像素密度为160的屏幕上的1px.这意味着在像素密度为320的屏幕上，1dp=2px；在像素密度为240的屏幕上，1dp=1.5px.
• dp宽度 = px宽度x160/dpi
• px宽度= dp宽度 * (dpi / 160)
  用屏幕宽度(1.5in)举例：

屏幕密度	屏幕像素宽度	屏幕dp宽度
120	180px	240
160	240px	240
240	320px	240

• 归一化像素密度
  以160像素密度屏幕作为标准。

分类	像素密度	与基准的倍数关系
mdpi	160	1
hdpi	240	1.5
xhdpi	320	2
xxhdpi	480	3
xxxhdpi	560	3.5

• dp仅适用于Android原生开发。
• 举例
  如果在英寸大小2.4in x 4.3in、像素大小为1080x1920、归一化像素密度为480的屏幕上进行设计。使用了一张480x960的像素大小的图片，则此图片对应dp大小为：160dp x 320dp.

iOS中对尺寸问题的处理

• pt(points): 是iOS开发中引入的抽象单位，称作点。开发过程中所有基于坐标系的绘制都是以 point 作为单位。与上文中的dp类似。在标准分辨率屏幕上，一个点（1 / 72英寸）等于一个像素。高像素密度的屏幕，因为在相同的物理空间中有更多的像素，每个point也就有更多的像素。因此，** 高分辨率显示器需要更多像素的图像**。

机型	对角线长度inch	设备分辨率px	逻辑分辨率point	与基准的倍数关系	DPI
iPhone 3GS	3.5	320×480	320×480	1×	163
iPhone 4	3.5	640x960	320×480	2×	326
iPhone 5(s)	4	640x1136	320×568	2×	326
iPhone 6/7	4.7	750x1334	375×667	2×	326
iPhone 6P/7P	5.5	1242x2208 —> 1080x1920	414×736	3×	401

除6P/7P、以及3GS外，其他所有iPhone的DPI是一致的，都是326，用@2x的素材。但是6P/7P的实际DPI是401，因此理论上苹果应该用401/326 * @2x=@2.46x的素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上，实际缩放至87%左右。

开发过程中的关键点

• 先将设计图中的距离转换为dp或者point.
• 将高倍图准备好，放入适当的位置并正确地调用。