在 cordova-ionic-angular 应用程序上处理多设备显示上的图像大小

Question

我正在使用这个出色的工具构建一个新应用，我有一个问题要解决。

处理多个屏幕和多个设备的图像大小的最佳方法是什么。

Apple = 视网膜和非视网膜 Android = ldpi、mdpi、hdpi、xhdpi、xxhdpi 和平板电脑（所有这些都具有多种屏幕分辨率） BlackBerry10 = 一种分辨率（但不等于其他分辨率） WindowsPhone8 = 一种分辨率（但不等于其他分辨率）

对于这种情况，最好的方法是什么？

1. 使用 SVG 图像（优化、性能、应用大小）??

2. 为设备像素比（CSS图像替换）专用的CSS标签（设计师可以杀了我:smile:lol）见列表http://bjango.com/articles/min-device-pixel-ratio/

3. CSS Sprite 表

4. 另一种方式

在决定之前，请考虑最适合所有设备的应用。

提前致谢

Answer 1

确实没有单一的方法可以做到这一点，因为图像的每个实现都需要根据其目的采用不同的方法。 SVG 很棒，但并非所有东西都可以用作 SVG。

媒体查询将成为您的盟友。

看到这个：supporting multiple resolution and density of images in phonegap

这是另一种方法：Angular.js data-bind background images using media queries

还有一些不错的用于 html5 图片元素的 polyfill，您可能会发现它们很有用。

见：https://github.com/scottjehl/picturefill

...及其 angularjs 指令实现https://github.com/tinacious/angular-picturefill