phonegap ipad/iphone, have a single app on both devices - iphone

Question

So I've been doing phonegap development for a while and have made a couple apps in the app store. I have made iphone and ipad apps and make them completely separate. I know apple allows for the submission of a single app that can be formatted for both devices, my question is how is this done with phonegap? I know I can edit the project settings and select ipad/iphone for the target device. But what do I do in my code to get it to work correctly?
Since it's html, I control sizing in html (and jquery). For example in my iphone app, I might have:
<img src="asdf.jpg" width="480">
And then that same ipad app would be:
<img src="asdf.jpg" width="1024">
It would be really awesome if I can just have two html files in my www folder, say, index.html and index-ipad.html, and then they share common img, css, and js folders. Is this possible?
I've checked the docs on phonegap extensively and couldn't find anything. Can somebody point me to a tutorial to do this? I really hate having multiple apps in the app store for the same content.
EDIT PER COMMENT BELOW
Maybe I wouldn't use the width attribute in html, maybe I would do this:
<img src="asdf_ipad.jpg">
and:
<img src="asdf_iphone.jpg">
where the two images have been sized for the two devices. In any event, I can handle the html/js/css, I just need to know how to implement a "switch" such that the ipad renders different from the iphone.

Answer 1

You can specify what file PhoneGap opens initially. Have a look at application:didFinishLaunchingWithOptions from AppDelegate.m
Do something like this to open a different index page for iPad:
if ([[[UIDevice currentDevice] model] containsString:#"iPad"]) {
...
self.viewController = [[[MainViewController alloc] init] autorelease];
self.viewController.wwwFolderName = #"www-ipad";
self.viewController.startPage = #"index.html";
...
}

Answer 2

why not use CSS media queries to identify your target device and update the images as appropriate? JqueryMobile for example does this to provide high-resolution icons to Retina devices...
Here's an article on how to use those to apply different stylesheets to iPhone vs iPad.
Hope this helps!

Answer 3

One option:
<img src="asdf.png" class="asdf"/>
.ipad .asdf {
width: 1024px;
}
.iphone .asdf {
width: 480px;
}
$(function() {
var deviceType = (device.platform=='iPhone' && screen.width==768) ? 'ipad' : 'iphone';
$('body').addClass(deviceType);
});
Note the deviceType logic is pretty simple (i.e. iPad locked in portrait), you will need to expand the logic to handle orientations and potentially add even further logic to detect Retina devices and in the future higher resolution iPads.

Answer 4

Well, I found a solution, I just use javascript to forward the page to my other html page like this:
if(screen.width==768)
window.location='index-ipad.html';
So I just have that code in my index.html file, and then, of course, I have a different index-ipad.html file. This gives me the freedom to do whatever I want and not limit me to just minor style changes. Note, this didn't work inside the jquery onload stuff $(function() {}); go figure.
I would have preferred to solve this with a "server side" approach, meaning the objective c layer that this resides upon. But, unfortunately, my skills in objective c aren't quite up to par. If anybody can give me that solution, I would greatly appreciate it!