px、ppi、dot、dpi、sp、dp、pt，让我们搞清楚这7的小伙伴都是谁

Posted 2023-04-30

参考技术A

像素 ，为影像显示的基本单位，译自英文” pixel ”， pix 是英语单词picture的常用简写，加上英语单词“元素” el ement，就得到 pixel ，故“像素”表示“画像元素”之意，有时亦被称为 pel （ p icture el ement）。每个这样的讯息元素不是一个点或者一个方块，而是一个抽象的取样。照片是一个个取样点的集合，在影像没有经过不正确的/有损的压缩或相机镜头合适的前提下，单位面积内的像素越多代表解析度越高，所显示的影像就会接近于真实物体。

像素是一个抽象单位，一个像素通常被视为影像的最小的完整取样。由于抽象，所以像素的大小并无意义，有意义的是像素的数量。

一幅影像中的像素个数有时被称为影像分辨率，显然分辨率有一个更为特定的定义--屏幕分辨率。像素可以用一个数表示，譬如一个"3百万像素"数字相机，它有额定三百万像素，或者用一对数字表示，例如"640乘480"，它有横向640像素和纵向480像素，因此其总数为640 × 480 = 307,200像素（30.72万像素）。

百万像素（Mega Pixels，缩写为MP）是指有“一百万个像素”，通常用于表达数字相机的分辨率。例如，一个相机可以使用2048×1536像素的分辨率，通常被称为有"3.1百万像素/310万像素"（2048×1536=3,145,728，通常只计算前两个位作有效数字）。

十亿像素影像是一种超高解系度的影像，相较于一般1000万像素的数字相机，差距高达100倍以上。十亿像素影像通常只用在特定用途，例如人造卫星上。

每英寸像素 （英语： P ixels P er I nch，缩写：PPI，又被称为 像素密度 ，是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器，电视机和手持电子设备屏幕的精细程度。通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。

电脑与手机屏幕的每英寸像素值取决于尺寸和分辨率，通常指的就是每英寸上的像素点数。

例如一台4:3的15寸显示器，分辨率为1024×768(XGA)，其横向和纵向的像素密度均为85每英寸像素。同样的一台显示器，如果分辨率设置的不同，像素点数也不同。分辨率越高，每英寸像素值也越高。

一台显示器的的像素密度是由显示单元之间的点距决定的。一台显像管或LCD液晶显示器的像素密度大约是67至130每英寸像素，而现在笔记本电脑的屏幕能达到200每英寸像素，个别产品甚至高达300每英寸像素。

要计算显示器的每英寸像素值，首先要确定屏幕的尺寸和分辨率。

其中，

以屏幕尺寸为4吋的iPhone 5为例，分辨率为1136x640，像素密度为326PPI。而分辨率为1920x1080的家用21.5寸显示器，像素密度为103PPI。

另外，由于屏幕的尺寸有时并不代表其实际的大小（例如苹果公司生产的21.5寸iMac电脑实际对角线长度为21.465寸），因此单凭尺寸算得的每英寸像素值会有一定的误差。

基于每英寸像素值的屏幕分级
根据屏幕每英寸像素值的不同，android系统的开发者将平板电脑和手机的屏幕分成五类：

名称 显示等级 每英寸像素值
LDPI 低等像素密度 每英寸大约120像素 (36 x 36 px)
MDPI 中等像素密度 每英寸大约160像素 (48 x 48 px)
HDPI 高等像素密度 每英寸大约240像素 (72 x 72 px)
XHDPI 极高像素密度 每英寸大约320像素 (96 x 96 px)
XXHDPI 超高像素密度 每英寸大约480像素 (144 x 144 px)

其中XHDPI往往指的是具有类似于苹果Retina显示屏显示效果的屏幕。

各种屏幕尺寸查阅： Screensizes

印刷品的最小单位，表示一个印刷颜色点，类似px，只有相对大小，用在印刷行业。

1英寸上打印的墨点数量，密度单位，只用在印刷行业，值越大，印刷越精细。

sp是安卓开发用的字体大小单位。

dp是安卓开发用的长度单位。
规定：1dp等于屏幕像素密度为160ppi时1px的长度，因此dp在整个系统大小是固定的。公式：1dp=（屏幕ppi/ 160）px。

1dp等于屏幕像素密度为160ppi时1px的长度，即，在mdpi时，1dp = 1px。 以mdpi为标准，这些屏幕的密度值比为： ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3。

pt用在不同的场景下是两个单位。

大小为1/72英寸=0.35mm，单位是英寸，是物理长度单位，大小固定，绝对单位。是photoshop里的字体单位。

公式：1pt= (PPI / 72) px。
当photoshop中新建画布的分辨率为72ppi，由公式得知1pt=1px。当分辨率为144ppi时，1pt=2px。

ios系统开发单位，是独立像素的意思，长度固定，不随屏幕像素密度ppi变化而变化。

苹果公司规定：普屏时1px=1px，而普屏的ppi=163像素/英寸，那么pt=1/163英寸=0.16mm（固定值）。普屏1px=1px，高清屏1pt=2px。

DPI ， dot per inch

DPI ， dot per inch ，即每英寸包含的点数。还有一个概念是 PPI ，即每英寸包含的像素数。一般我们用 DPI 就够了，对于专业人士处理超高 DPI 的场景，使用 PPI 可能更精确一些。在 Qt 中，只有 DPI ，所以我们单说它吧。

这个值越大，像素密度越大，小尺寸的屏幕就可以有大分辨率。比如有的 Android 手机， 3.7 吋屏幕就能提供 960x540 的分辨率，而有的手机， 5 吋屏幕却提供 800x480 的分辨率。这两种不同屏幕的尺寸和分辨率的手机，5 吋屏看起来会有颗粒感，而 3.7 吋看起来则非常细腻。这就是像素密度带来的差别。

有的屏幕，横向的 DPI 和纵向的 DPI 不一样，即像素点不是正方形，这就更复杂了……

我们在写应用时，理想的情况是：应当根据 DPI + 屏幕分辨率来设置界面元素的大小。

Qt的实现细节

Mac OS 10.8(10.7是非正式的？)添加了对高DPI的Retina显示的支持。Qt 4免费获得这一支持，因为它使用的是CoreGraphics绘制引擎。

Qt 5使用的是光栅绘制引擎并且Qt通过缩放绘图器变换(transform)实现了高DPI矢量的绘制。HITheme同时为Qt 4和5提供了高DPI的Mac风格。在Qt 5的Fusion风格中，对于高DPI模式的支持也已经修改好了。

OpenGL是一种基于设备像素的API并且对于高DPI模式也仍然如此。在NSView中有一个flag可以用来开启或者禁用2x缩放——Qt在所有情况下都可以设置它。Shaders运行在设备像素中。

Qt Quick 1是构建于QGraphicsView之上的，它是一个QWidget并且通过QPainter获得对于高DPI的支持。

Qt Quick 2是基于Scene Graph(和OpenGL)，已经更新了高DPI的支持。Qt Quick控件(也就是以前的Desktop Component)也已经更新了在高DPI模式下的渲染，其中包括距离场(distance field)文本渲染。(译者注：关于距离场，可以参考Yoann Lopes – Text Rendering in the QML Scene Graph以及iKDE上的译文。)

这里的卖点是应用程序开发人员不需要关心这些，您只需要在设备无关像素的空间里舒适地开发，Qt和/或OS会为您处理那些复杂的事情。但有一个例外，光栅内容(raster content)——需要提供高DPI光栅内容，并且应用程序代码需要正确处理这些内容。

窗口部件和绘图器

QPainter代码绝大多数情况下都和原来一样。我们来看看绘制渐变(gradient)的代码：

在高DPI显示器上，这个渐变在屏幕上的大小还是一样的，但是被填充了更多的(设备)像素。

绘制一个像素映射(pixmap)也是类似的：

QRect destinationRect = ...QPixmap pixmap = ...painter.drawPixmap(destinationRect, pixmap);

为了避免在高DPI显示器上出现缩放失真，像素映射必须包含足够的像素：两倍于destinationRect的宽和高。应用程序可以直接提供它们，也可以使用QIcon来管理不同的解析度：

QRect destinationRect = ...QIcon icon = ...painter.drawPixmap(destinationRect, icon.pixmap(destinationRect.size()));

QIcon::pixmap()已经被修改了，可以在高DPI系统中返回一个更大的像素映射。这种行为的改变会破坏现有的代码，所以它是由AA_UseHighDpiPixmaps这个应用程序属性来控制的：

qApp->setAttribute(Qt::AA_UseHighDpiPixmaps);

在Qt 5.1中这个属性默认值是关闭的，但在未来的Qt发布中它很有可能默认为打开。

极端情况和devicePixelRatio

Qt的窗口部件有一些极端情况。在理想情况下，它一直使用QIcon，并且在绘制的时候会使用正确的像素映射，但是实际情况是Qt API经常直接生成和使用像素映射。当像素映射的大小被用来计算布局的几何信息时，会发生错误——如果一个像素映射已经是高分辨率的，那么在屏幕上它就不应该再占用更多的空间。

通过使用QPixmap::devicePixelRatio()，就能让200x200的像素映射实际占据100x100的设备无关像素。由QIcon::pixmap()返回的像素映射中devicePixelRatio已经设置好了。

例如QLabel就是一个“像素映射消费者”：

QPixmap pixmap2x = ...pixmap2x.setDevicePixelRatio(2.0);
QLabel *label = ...label->setPixmap(pixmap2x);

然后QLabel会除以devicePixelRatio来获得布局的大小：

QSize layoutSize = pixmap.size() / pixmap.devicePixelRatio();

与此类似的几种情况在Qt中都已经修复，并且应用程序代码在启用AA_UseHighDpiPixmaps之前也需要做类似处理。

下面几个Qt类中都提供了devicePixelRatio()的读写函数：

类	注释
QWindow::devicePixelRatio()	推荐使用的读写函数
QScreen::devicePixelRatio()
QGuiApplication::devicePixelRatio()	如果没有QWindow指针，请使用这个
QImage::[set]devicePixelRatio()
QPixmap::[set]devicePixelRatio()

文本

字体大小还可以和原来一样，会在高DPI显示中产生类似的大小(但会有一点小问题)。字体的像素大小是设备无关的像素大小。您在高DPI显示中永远不会得到太小的文本。

QGLWidget

OpenGL是在设备像素空间中工作的。例如，传递给glViewport的宽和高应该是设备像素。QGLWidget::resizeGL()中的宽和高也是设备像素的。

不管怎样，QGLWidget::width()实际上就是QWidget::width()，它返回的是设备无关像素的值。如果需要，用它来乘以widget->windowHandle()->devicePixelRatio()可以解决很多问题。

Qt Quick 2和控件

Qt Quick 2和Qt Quick控件可以直接使用。因为窗口部件的坐标是设备无关像素的。Qt Quick也有几个和光栅相关的极端情况，因为QML的Image元素是通过URL来指定图像源的，这样就避免了像素映射的传递。

Qt Quick控件

还有一个例外是OpenGL着色器(shader)，它运行在设备像素空间中并且可以看到全分辨率。在通常情况下这没有什么问题，我们应该知道的一件重要的事情是，鼠标坐标是设备无关像素的，也许需要被转换成设备像素。

运行中的着色器效果实例

管理高解析度的光栅内容

正如我们所看到的，在缩放的情况下，光栅内容看起来会不够好，所以必须提供高解析度的内容。作为应用程序开发人员，您有两个选项：(请忽略“什么都不做”选项)

• 使用高解析度版本替换现有光栅内容

• 另外提供一份高解析度内容

第一个选项很简单，因为每个资源只有一个版本。可是您也许会发现(或者您的设计师会告诉您)像图标这样的资源只有在它被创建的那个特定解析度下看起来才最好。为了解决这个问题，Qt沿用了“@2x”这种图像文件名的方案：

[email protected]

这样高解析度的内容和原来的一一对应。在需要的时候，“@2x”的版本会被QML的Image元素以及QIcon自动加载。

Image { source = “foo.png” }
QIcon icon(“foo.png”)

(对于QIcon请记住使用AA_UseHighDpiPixmaps)

试验性的跨平台的高解析度支持

QPA允许我们相对容易的完成跨平台的实现。Qt现在把这一问题分为三层：

• 应用程序层(应用程序代码和使用QPA类的Qt代码)

• QPA层(QWindow、QScreen、QBackingStore)

• 平台插件层(QPlatform*子类)

简化一下，应用程序层是在设备无关像素空间中工作的，并不知道设备像素。平台插件是在设备像素空间中工作的，并不知道设备无关像素。QPA层在两者之间，基于一个由环境变量QT_HIGHDPI_SCALE_FACTOR指定的缩放因子进行转换。

实际上，这个情况还会更复杂一些，各层之间会有泄露的事情发生，并且在Mac和iOS下还会有一些例外情况。

代码在github上。最后是XCB下的Qt Creator的截屏：

DPI缩放的Qt Creator

QT_HIGDPI_SCALE_FACTOR=2缩放的Qt Creator

High DPI Revisited

A few weeks ago I talked about high DPI in KDE applications

Abridged Recap

• By settings QT_DEVICE_PIXEL_RATIO=2 Qt will scale all painting to draw things twice the size

• By default this will just scale all our images so it slightly defeats the point of buying a fancy new high resolution screen

• Qt can try and be clever and draw high resolution icons and other images

• This is liable to break stuff, so requires each and every app to opt-in

Progress

On Monday this week I was loaned a high resolution laptop, and set about trying to make sure everything works perfectly within the KDE world.We can now set this environment variable from a configuration file, and a user interface is in review to allow the user to manually set their scaling factor.

I then set about trying to enable high resolution image support in various applications and trying to fix all that is broken.

This task is two-fold. The first is fixing any bugs that result in simply enabling the high resolution icons. Second is making sure applications that provide their own images, do so in a way that still look spot on when used on a high resolution monitor.

Progress Screenshots

Here is my screenshot just after installing Kubuntu CI on a high resolution laptop (3800x1800).

We can correct some parts by just boosting the font size, but that doesn‘t solve the problems of small checkboxes, buttons and other hit areas. This isn‘t just a superficial problem and it becomes a major usability problem especially as these screens become more widespread.

This second screenshot shows the result with the device pixel ratio set and a weeks worth of fixing in a range of apps. (click for full size)

The most obvious thing is that the sizes are bigger, but more importantly this is happening whilst all icons and scrollbars remain crystal clear at the native resolution for that screen.

A zoomed in section looks like this:

Current Status

Every Qt5 app can double up with no work at all, but to look right requires some effort.

For some applications supporting high DPI has been easy. It is a single one line in KWrite, and suddenly all icons look spot on with no regressions. For applications such as Dolphin which do a lot more graphical tasks, this has not been so trivial. There are a lot of images involved, and a lot of complicated code around caching these which conflicts with the high resolution support without some further work.

I am tracking progress on a Kanboard page . Naturally I can‘t do every application, but I hope that by checking a few I can make sure all of our frameworks have full support making it easy for every other developer.

We also have a problem that Qt4 applications do not support device independent pixels. There are still many applications without a frameworks release even in the upcoming 15.04 applications release. Even in the next applications release in 15.08 August we are still unlikely to see a released PIM stack.Is it a good idea to add an option into our UIs that improves some applications at the cost of consistency? It‘s not an easy answer.