Android webkit光栅与矢量图像

在为webkit浏览器设计HTML时，我试图解决一个解决方案问题。 所以基本上问题是webkit浏览器的分辨率可以从240x320到960x640，我不能为每个浏览器设置单独的图像/图标，但我确实希望所有设备上的页面看起来都一样（或者至少非常接近）

缩放图像（使用百分比）是可行的，但会降低性能：

另一个选项是使用webkit中支持的矢量图形，但我不知道这些页面/应用程序会对性能产生什么影响

另一个选项是为一些标准的众所周知的分辨率设置一些图标集，当您得到一个在这些组之外的浏览器时，您可以对最接近用户本机分辨率的图标集应用一些较小的缩放

所以基本上我想问的是，在考虑性能的情况下，实现这一目标的最佳途径是什么

谢谢 -Assaf在运行时性能方面总是比较昂贵，因为需要运行复杂的方程来创建它们。话虽如此，我不确定他们是否从头开始重新绘制每一帧，或者结果是否缓存，除非它处于脏状态

---

我建议为大家熟知的分辨率设置几个不同的图标集，如果需要，可以应用较小的缩放。

第一个答案毫无帮助。矢量图形可以和PNG一样小，并且使用正确可以支持透明度和其他各种良好功能

唯一的问题是，如果你在寻找完美的像素，放大一些图像可能会导致问题

您还可以使用illustrator to html5画布插件直接导出到html5画布

对于行图标上的webkit浏览器，我们设置了一个属性，该属性不允许webkit缩放桌面浏览器的图标。或者对于一些图标，我们包含了一个小SVG

他们得到了很好的支持，工作得很好。更好的方法是使用免费的字体创建工具，将illustrator中的矢量图形粘贴到字体中，这样您就可以使用web字体调用任意大小的图标，如简单文本。我们使用这种技术