Question

we are creating an application using HTML5 for Iphone, IPAD and Android. Now the problem is we are using the images resolution 320X480 for android, when we check in the devices whose resolution is 320X480, its shows the perfect result, but when we see in different resolution UI is gone, Is there any solution in HTML5, so that we can get the Proper UI in all devices, Or any resolution of images which can work in all mobile devices.

Thanks,
Rahul

Answer 1

I am not quite sure whether this will help you, but probably it is worth a try. If you want to serve different resolutions at least ldpi, mdpi, hdpi or xhdpi you can still store different resolutions of the image in the 4 different folders of the app: drawable-ldpi etc. Then if you refer to the image like that: file:///android_res/drawable/image.png, the most appropriate will be served – the same way as in native Android applications. On the other hand if you want the image to resize perfectly to every kind of screen just give it height relative to the size of the screen, keeping the aspect ratio (this is css):

{ 
  ...
  width: 75%;
  height: auto;
}

Hopefully this will help.