在 Sencha Touch 中处理不同分辨率触控设备的图像答案

【问题标题】：Working with images in Sencha Touch for different Resolution Touch Device在 Sencha Touch 中处理不同分辨率触控设备的图像
【发布时间】：2013-03-11 11:47:16
【问题描述】：

我计划将 Sencha Touch 2.x 用于我的网站移动（轻量级）视图。

我是 Sencha 开发的新手。我非常了解 HTML 5。在继续开发之前，我想知道几件事。

Sencha 如何管理图像。因为我计划使用不同分辨率的触摸设备（即 iphone4s、iphone 5、iPad、Android 和 Blackberry 10）。我知道 HTML 5 中使用的媒体查询。我们是否需要为每种分辨率传递不同的图像，或者 sencha 将比较每种分辨率的图像。（仅供参考...我也遇到How to add images for different screen resolutions in sencha touch? 建议使用 HTML5 媒体查询。这是唯一的方法吗？还请参考 Creating a splash screen in Sencha Touch for different mobile devices resolutions 用于启动屏幕）
是否支持 Retina Display？（即 iOS 中的 @2x）。如果不是我们如何管理视网膜显示图像。

提前感谢您提供任何宝贵的建议。

【问题讨论】：

标签： extjs sencha-touch sencha-touch-2 sencha-architect

【解决方案1】：

1) 为简单起见，我个人会为每个整体平台（Android、iPhone、Blackberry）使用最高分辨率/尺寸。手机将相应地缩放图像。它只是让事情变得更简单；在我看来，不这样做的唯一原因是，如果您拥有真正巨大的总图像大小并且优化是 >10mb 之间的差异。每当手机必须缩放任何图像时，显然都会对性能造成小幅影响，但最终对我来说根本不明显。

2) Sencha 支持视网膜显示。只要您使用足够高分辨率的图像，它就会正确缩放。当然，请确保包括视网膜显示splash screens 和app icons。

【讨论】：

我们是否需要在开发过程中为任何设备指定图像大小？（即 iPhone 320 x 480）
不，您所需要的只是每个图像的相对像素大小（您通常会声明，即：“height:200px;width:100px”）。一切都将在后台运行，以确定图像缩放的最终结果。
感谢@Sergio Prado 的快速响应，这绝对是对我的帮助。
你明白了！很高兴它有帮助:)

【解决方案2】：

不要忘记 Sencha.io .....它可以为设备自动调整图像大小，提供更小的版本，因此下载速度更快。在这里阅读：

http://www.sencha.com/products/io/

并在此处查看示例：

http://extdesenv.com/tutorials/how-to-create-a-mobile-flickr-app-with-sencha-touch-2/

:-)

【讨论】：