Take the 2-minute tour ×

I'm looking for the best aproach how to scale theme(read headers, footer, inputs etc) using jquery mobile,

let's say I have this header which's height is about 90px, it's gonna look great on iphone4, it's gonna look somewhat fine on my galaxy s, but it's gonna be ridiculously huge on 3g/3gs and android phones with lower resolution.

I could probably use media queries, but that would be like coding the whole thing countless times to make it look properly on every majorly used resolution, considering I'd have to manually set height for every single possible element and content I'll add..

or I could just leave it as it is on http://jquerymobile.com/demos/1.0b2/docs/pages/page-template.html but considering I'm not using just gradients, but actuall graphics, that were designed for iphone4 resolution(that 90px header), it's not gonna look good, scaled down so much

or I could be probably using *em*s but that's not exactly realiable, nor are percents..

Is there any other way? Some best practice perhaps? App's design down below. Thanks in advance.

apps design

share|improve this question
Rewrite all image tags src to have low res version dynamically on the page load? Identify potential images using url regex match. –  Mikko Ohtamaa Sep 3 '11 at 0:22
there won't be not images at all, it's all dom elements with background, I can use css3's background-size, but then again it's still the same problem with having to set it dozens of times for all the different resolutions.. –  foxx Sep 3 '11 at 7:46
You can detect those backgrounds using CSS class ids and then set low res version using style attribute on document.ready? –  Mikko Ohtamaa Sep 3 '11 at 13:21
that just the same as using media queries, just much much less elegant and I'd still have to manually set height and width for every single element that's gonna be inside _for every possible major resolution_ –  foxx Sep 3 '11 at 14:54
No, you can automatically calculate height in the Javascript and based on the calculation choose the image / set the width & height. –  Mikko Ohtamaa Sep 3 '11 at 17:07

1 Answer 1

for iphone 4/4s images place @2x behind your image, iphone 4 will detect these images automaticly, for iphone 3g/3gs make images that are smaller. Example u have a image for iphone 4 its 100 x 100px u name it: image1@2x.png, for iphone 3gs u make it 50 x 50 and just name it image1.png. If u design in photoshop always use shape layers. so u can scale up down. hope this helps.

share|improve this answer

Your Answer


