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

标签 image angularjs cordova screen ionic-framework

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

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

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. 另一种方式

在做出决定之前,请考虑什么最适合所有设备。

提前致谢

最佳答案

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

关于image - 在 cordova-ionic-Angular 应用程序上处理多设备显示上的图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24276961/

相关文章:

android - Cordova Hook 和访问build设置

javascript - 如何通过 react-share 共享动态生成的图像?

cocoa - 如何从 NSBitmapImageRep 创建具有透明度的 8 位 PNG?

iphone - 图像幻灯片

javascript - Angular 1.3 中是否有更好的模式可以在每次修改 ng-repeat 中的项目时调用函数?

javascript - ng-pattern 在指令内不起作用

angularjs - Angular 解释自定义指令的链接函数内的 {{}}

android - ionic 包 io.ionic.starter 签名错误

java.io.IOException : Prepare failed.:状态=0x1

java - 尝试使用异步将图像上传到 Android 网络服务器?