HI, working with html/javascript code that when you tap on an image another image appears...it just toggles between the 2 images...my question is..is there a way to scale the images to the appropriate size to fill the screen on both iphone and ipad? the only way it's working now on both is to have pretty big images but would like to keep the files small. i realize this code will scale the html but doesn't work out for both iphone and ipad <meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;/> thanks!

My other thought was to try and use the image gallery to toggle between two images but tapping a picture doesn't allow that in image gallery.. unless I could somehow rename the arrows in the bottom nav bar...?

A little confused as to what you're trying to do. You can use HTML to scale images. However, if you scale in image 'up' from a smaller size it will probably look bad? It's for sure a balance trying to find the right combination when authoring for both large and small devices. One way to do it is to use two images, one for iPhone and one for iPad. Javascript determines which image to show when you tap it. Or, like you already figured out, just change the images size. Generally it's best to use CSS to size the image and not the html itself. Like ... <style type='text/css'> .imgIpad{width:400px;height:300px;} .imgIphone(width:320;height:100px;} </style> Then, in the HTML, assign you CSS class to the image tag: <img id='myImage' src='your image' class='imgIPad' /> Your javascript would then do (psuedo code): if(isIpad){ document.getElementById('myImage').className = 'imgIPad'; }else{ document.getElementById('myImage').className = 'imgIPhone'; } This approach would mean you would need routine to figure out if it's iPad or iPhone in Javascript (google it). You could apply the new style on rotatation, tap, etc.

cool..thanks again for another detailed post...awesome David.