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

时间:2014-06-18 04:15:08

标签: image angularjs cordova screen ionic-framework

我正在使用这个伟大的工具构建一个新的应用程序,我有一个问题需要解决。

处理多个scren和多个设备的imnage大小的最佳方法是什么。

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

对于这种情况,最好的方法是什么?

  1. 使用SVG图像(Optimizacion,性能,应用程序的大小)??

  2. 为设备像素比率(CSS Image Replacement)设计CSS标签(设计师可以杀了我:smile:lol)查看列表http://bjango.com/articles/min-device-pixel-ratio/

  3. CSS Sprite表

  4. 另一种方式

  5. 在做出决定之前,请考虑在所有设备中应用的最佳方式。

    提前致谢

1 个答案:

答案 0 :(得分:2)

实际上没有一种方法可以做到这一点,因为图像的每次实现都需要根据其目的采用不同的方法。 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