Working with images in Sencha Touch for different Resolution Touch Device

4
votes

I'm planning to use Sencha Touch 2.x for my websites mobile (Light weight) view.

I am new to Sencha development. I know HTML 5 very well. Couple of things I would like to know before I would proceed with the development.

  1. How Sencha manages the images. As I am planning to work with different resolution touch devices (i.e. iphone4s, iphone 5, iPad, Android and Blackberry 10). I know media query that used in HTML 5. Do we need to pass different images for each resolution or sencha will compare image for each resolution. (FYI... I also come across also How to add images for different screen resolutions in sencha touch? suggest the HTML5 media query. Is it the only way? and also refer Creating a splash screen in Sencha Touch for different mobile devices resolutions which is for splash screen)

  2. Is it support Retina Display? (i.e. @2x in iOS). if not than how we can manage the retina display images.

Thanks in advance for any valuable suggestion.

2
extjssencha-touchsencha-touch-2sencha-architect

2 Answers

5
votes

1) For simplicity's sake, I personally go with using the highest resolution/size for each overall platform (Android, iPhone, Blackberry). The phones will scale the images accordingly. It just makes things way simpler; the only reason in my mind to not do this is if you have a truly massive total image size and optimizing is the difference between >10mb. Any time a phone has to scale any images, there is apparently a small performance hit, but it's ultimately not noticeable at all to me.

2) Sencha supports retina display. As long as you use a sufficiently high resolution image, it will be scaled properly. Make sure to include retina display splash screens and app icons, of course.

0
votes

Don't forget about Sencha.io.....it can automatically resize images for the device, delivering a smaller version so downloads are quicker. Have a read here:

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

and see an example here:

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

:-)