Hi, I'm designing an application that would run on both iPhone and iPad. I have multiple custom HTML pages that I'm using to present information, and they will contain images. I would like to scale the image (or show different ones based on the device) depending on whether the user is using an iPhone or iPad. Creating the images for the iPhone screen size would make them super small in full iPad mode. My thought was to use Javascript to detect the screen size and then present a particular image based on that. But, I'm having problems figuring out how to do that. Does anybody have any thoughts on how to make this work? Is Javascript the best way to go? Thanks! Mark

Hi Mark I'm working on a similar problem myself at the moment. If your using a custom html screen my suggestion is to use different style sheets based on whether its an iphone or ipad. Additionally you can also define a portrait or landscape orientaion style sheet. This code seems to work for me - put it in the head of your html page, and define the style sheets with the code you need for each screen, for example picture sizes in a <div> <link href=iphone-portrait.css rel=stylesheet media=all and (max-device-width: 480px) and (orientation:portrait) rel=stylesheet> <link href=iphone-landscape.css rel=stylesheet media=all and (max-device-width: 480px) and (orientation:landscape) rel=stylesheet> <link href=ipad-portrait.css media=all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) rel=stylesheet> <link href=ipad-landscape.css media=all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) rel=stylesheet> Hope this helps. Rohan

Hi Rohan, Ah, that looks like a very promising solution! I'll give it whirl and let you know how it works out. Thanks! Mark

And here's some CSS that can go with this : body { margin: 0px; padding: 0px; font-family: Verdana, sans-serif; padding-bottom: 10px; } #header h1 { display: none; } #header { width: 100%; height: 67px; background: url(http://oreilly.com/images/oreilly/oreilly.gif) no-repeat center top; border-bottom: 1px solid #303030; } #header img { float: left; margin: 0px; height: 60px; padding-left: 5px; padding-top: 7px; } #news, #upcoming, #new { margin: 10px; } #news ul, #upcoming ul, #new ul { margin: 0px; padding: 0px; } #news li, #upcoming li, #new li { list-style-type: none; } #news li p, #upcoming li p, #new li p { padding-left: 15px; } apply these styles to #upcoming and #new when in landscape mode */ #news { width: 580px; padding-right: 20px; float: left; } #upcoming { margin-left: 600px; }