应用开发使用的 PPI

PPI 是每英寸像素数量。其值决定了显示器的像素密度。

如果 PPI 相同,那么同样的像素点数量将显示为同样的物理大小。

因此,应用程序的开发者在设计自己的应用中的文字大小时,需要其在所有设备上文字大小都是合适的,就应当在一个确定的 PPI 下开发。例如对于大部分桌面操作系统,其值是 96 PPI。

可是,实际用户的显示器大小、分辨率各不相同,有大有小,像素有密有疏,因此显示的文字可能会偏大、偏小。

为了缓解文字太大、太小的问题,操作系统往往会开启一些缩放功能:

file

虽然这可以一定程度的缓解这个问题,但是非整数倍缩放可能让非矢量内容产生锯齿。(具体取决于桌面环境的实现)

为了计算你应该使用的缩放比例使得屏幕上的文字是开发者希望你看到的文字大小并且避免锯齿,你应当合理的挑选显示器,并合理的使用缩放功能。

挑选显示器

显示的大小不是乱挑的。应该尽可能让操作系统使用整数缩放。不然就需要使用 Fractional Scaling。

(Fractional Scaling指的是非整数倍缩放。其一定会带来模糊。因为这个世界上不存在1.5个像素。No matter how you implement fractional scaling, it's not going to look good. The reason is simple: half pixels don't exist. If an app wants to draw a 1px solid border, it can't draw it on a 1.5 scaled display because 1.5 pixel doesn't exist.

挑选显示器需要计算 PPI。其中PPI的计算方法是:

file

参考代码 (C#)

    public static double CalculatePPI(int x, int y, int diagonal)
    {
        double resolution = Math.Sqrt(x * x + y * y);
        double ppi = resolution / diagonal;
        return Math.Round(ppi, 2);
    }

当然,要计算 PPI,你需要知道显示器的宽度和高度,因此你需要这个函数:

    public static Tuple<double, double> CalculateDisplaySize(int x, int y, int diagonal) // diagonal 单位是英寸
    {
        double aspectRatio = Math.Sqrt(x * x + y * y);
        double height = y * diagonal / aspectRatio;
        double width = x * diagonal / aspectRatio;
        return Tuple.Create(Math.Round(width, 2), Math.Round(height, 2));
    }

例如,一个 1920x1080 分辨率的屏幕,如果是23英寸,那么其:

Display width: 20.05 ft
Display height: 11.28 ft
Display PPI: 95.78

宽度是20英寸,高度是11。28英寸,PPI是96。

PPI 应当尽可能是 96 的整数倍,这是考虑到 Windows \ Linux 都默认使用 96 作为 PPI,而大部分应用也设计为了 96 PPI。

因此,对于 1920x1080 分辨率的屏幕,其最佳尺寸应是 23 英寸的整数倍。太大或太小都会导致内容过大或过小而需要非整数缩放。

苹果

注意:苹果的产品则使用了 72 PPI。如果你在采购用于 MacOS 的显示器,那么应当让 PPI 尽可能是 72 的整数倍。

(苹果这是为了当时尊重打印机的像素密度。而微软使用 96 PPI 是为了让文字在屏幕上比在纸张上更大 30%,考虑到显示器比纸张离人眼更远30%。后来这些标准就延续至今。)

Microsoft tried to solve both problems with a hack that has had long-term consequences for the understanding of what DPI and PPI mean.[5] Microsoft began writing its software to treat the screen as though it provided a PPI characteristic that is 4⁄3 of what the screen actually displayed. Because most screens at the time provided around 72 PPI, Microsoft essentially wrote its software to assume that every screen provides 96 PPI (because 72 × 4⁄3 = 96). The short-term gain of this trickery was twofold.

https://en.wikipedia.org/wiki/Dots_per_inch#:~:text=Microsoft%20tried%20to,trickery%20was%20twofold%3A

示例尺寸

LGOLED42C2

file

LG OLED 42C2 显示器,拥有 4K 分辨率,尺寸为 42 英寸。

Display width: 36.61 ft
Display height: 20.59 ft
Display PPI: 104.9
Suggested scale: 1.09

PPI 比 96 稍大一点,内容应当使用 109% 缩放比例才可以达到最佳体验。所以如果使用 100% 缩放会有点儿字小。

Surface Studio 2+

file

Surface Studio 2+,屏幕为3:2尺寸,4500x3000分辨率,大约28英寸。(这里使用28英寸计算)

Display width: 23.3 ft
Display height: 15.53 ft
Display PPI: 193.15 (因为尺寸并不是精确的28英寸,所以这个计算值有误差,实际值应该是 192)
Suggested scale: 2.01

PPI 就是完美的 192,内容直接使用 200% 缩放,会看到完美的尺寸。所有内容的大小会无比合适。而 200% 缩放也让内容非常舒适清晰。

Apple Studio Display

file

27-inch (diagonal) 5K Retina display, 5120-by-2880 resolution at 218 pixels per inch

Display width: 23.53 ft
Display height: 13.24 ft
Display PPI: 217.57
Suggested scale: 3

如果你打算用这个屏幕运行 Windows,那么使用 200% 的缩放,内容会显得稍微小了一点。

但是,苹果更喜欢 72 PPI!而 216 正好是72的3倍。因此在这个屏幕上直接使用 300% 缩放比例运行 MacOS 可以得到非常理想的效果。

某宝2000块的显示器

file

某宝有大量2000多块的4K 27英寸显示器。竟然销量还都不错。也不乏大品牌的显示器。

Display width: 23.53 ft
Display height: 13.24 ft
Display PPI: 163.18
Suggested scale: 1.7

PPI 是尴尬的 163。此时你只有把缩放比例调整到 175% 才合适。但是调到 175% 就会引入 Fractional Scaling。非常难受。

计算应当设置的缩放比例

设置缩放比例是为了将文字的显示大小缩放到 96 PPI 时的文字大小,考虑到大部分应用都基于 96 PPI 设计。

其算法为: 缩放比例 = 显示器的PPI / 96 。

例如你的显示器是 192 PPI,那么只需要缩放比例设置为 200% ,其文字大小就会和 96 PPI 时完全相同。

可以直接把下面代码粘贴到网页版 C# 运行环境中,去评估你的显示器的PPI、缩放比例。

网页版 C# 运行环境中 https://try.dot.net/

快来计算一下你的电脑应该设置为多少的缩放比例吧!

file

using System;

public class Program
{
    public static Tuple<double, double> CalculateDisplaySize(int x, int y, double diagonal)
    {
        double aspectRatio = Math.Sqrt(x * x + y * y);
        double height = y * diagonal / aspectRatio;
        double width = x * diagonal / aspectRatio;
        return Tuple.Create(Math.Round(width, 2), Math.Round(height, 2));
    }
    public static double CalculatePPI(int x, int y, double diagonal)
    {
        double resolution = Math.Sqrt(x * x + y * y);
        double ppi = resolution / diagonal;
        return Math.Round(ppi, 2);
    }

    public static void Main()
    {
        // 将下面的变量改为你显示器的分辨率、尺寸(英寸)
        int x = 2560;
        int y = 1440;
        double diagonal = 27;
				
        var result = CalculateDisplaySize(x, y, diagonal);
        Console.WriteLine($"Display width: {result.Item1} ft");
        Console.WriteLine($"Display height: {result.Item2} ft");

        var ppi = CalculatePPI(x, y, diagonal);
        Console.WriteLine($"Display PPI: {ppi}");
        Console.WriteLine($"Suggested scale: {Math.Round(ppi / 96, 2) * 100}% (Windows & Linux)");
        Console.WriteLine($"Suggested scale: {Math.Round(ppi / 72, 2) * 100}% (Apple)");
    }
}

开发者

对于桌面应用的开发者,自然不希望自己的应用在其它消费者的设备上文字太大或太小。

因此开发者应当在 96 PPI 的情况下测试自己应用的文字大小。只要此时文字大小合适,那么在所有消费者的设备上都是合适的。(考虑到消费者也会把设备缩放为 96 PPI 时的文字大小)

显然并非所有开发者都拥有 96 PPI 的显示器,因此开发人员更需要计算自己应当设置的缩放比例,使得文字大小接近 96 PPI 时的大小。

备注

别误会,虽然采购显示器时应该尽可能让 PPI 接近 96 的整数倍,也就是缩放比例接近 100% 或 200%,但是这并不是唯一标准噢。

显示器还有一大堆别的参数,包括:

  • 色准
  • 色域
  • HDR支持情况
  • 极限亮度
  • 刷新率
  • 延迟
  • 面板类型

这篇文章只是帮助你挑选显示器时注意合适的分辨率和尺寸搭配,并且在你已经买到显示器后,告诉你如何正确设置缩放比例。这并不意味着这是唯一参考标准!