我在为webkit浏览器设计HTML时试图解决一个解决问题。 所以基本上问题是webkit浏览器的分辨率可以从240x320到960x640，并且我不能为每个设备分别设置单独的图像/图标，但我确实希望所有设备上的页面看起来都一样（或者至少非常接近） ）。
缩放图像（使用百分比）有效，但性能下降： http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
另一个选项是使用webkit支持的矢量图形，但我不知道会对页面/应用程序产生的性能影响。
另一个选项是为一些标准的知名分辨率设置一些图标集，当你得到一个超出这些组的浏览器时，你会在最接近用户原始分辨率的集合上应用一些小的缩放。
基本上我要问的是，在考虑到性能的情况下实现这一目标的最佳途径是什么？
由于 -Assaf
答案 0 :(得分：2)
Vector graphics在运行时性能方面总是更昂贵，因为运行复杂的方程式来创建它们。话虽如此，我不确定它们是否从头开始重绘每一帧，或者如果结果被缓存，除非它处于脏状态。
我建议为众所周知的分辨率设置几个不同的图标集，并在需要时应用小的缩放。
答案 1 :(得分：0)
第一个答案根本没用。矢量图形可以和PNG一样小，使用正确可以支持透明度和各种其他好的功能。
唯一的问题是，如果你想要一些像素完美的完美，一些图像放大可能会导致问题。
你也可以使用illustrator到html5 canvas插件直接导出到html5画布。
对于行图标上的webkit浏览器，我们设置了一个不允许webkit扩展桌面浏览器图标的属性。或者对于某些图标，我们包含一个小SVG。
他们得到很好的支持并且工作得很好。更好的方法是使用免费的字体创建工具并将插图画家的矢量图形粘贴到字体中，这样您就可以使用网络字体简单地调出任何大小的图标，就像简单的文本一样。我们使用这种技术。