智能 phone 上的模糊网页图形 - 双图像大小或分辨率？

Question

我创建的各种 Web 图形在高分辨率智能 phone 屏幕上变得模糊，这与桌面屏幕不同。

我需要：

1. 将图像大小加倍并以编程方式将其大小调整为一半
2. 提高分辨率（例如 72 到 300）。

我的理解是后者只影响印刷而不是数字屏幕。

是否有其他人遇到此问题？如果遇到，建议的解决方法是什么？

Answer 1

双图像大小。

您甚至应该渲染图像（简单或加倍），具体取决于 device/viewport 分辨率。

提高分辨率是一件相当复杂的事情。 Print/digital/dpi/ppi;它可以在一堆设备上运行，但不是全部。

Answer 2

你的假设是正确的。您需要将图像尺寸加倍，如果您想要挑剔一点，甚至可能更多一点，因为某些屏幕分辨率的像素密度是桌面显示器的 3 倍或更多。 Double 工作得很好，所以我会从那里开始。

与 DPI 一样，分辨率除了使图像资源的文件大小超过所需大小外，不会对屏幕上的 Web 图形执行任何操作。您可以使用 5 DPI 的分辨率，它们在屏幕上看起来与 300 DPI 相同。降低 Web 图形 DPI 的主要问题是当用户想要打印您的页面时，任何具有非常低 DPI 的图像都会非常像素化。

根据您创建的图形，您可以选择标准图像格式以外的一些选项。您可以使用 SVG 或创建自己的图标字体。两者都是矢量图像，因此它们在任何支持它们的设备上看起来都很清晰。图标字体得到广泛支持，SVG 也不错，但可能需要一个小垫片，具体取决于您需要做什么。