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

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";
    ...
}