Phonegap ipad / iphone, on one device there is one application

Question

So, I’ve been developing telephone conversations for a while and made a couple of apps in the app store. I made iphone and ipad applications and made them completely separate. I know that an apple allows you to send one application, which can be formatted for both devices. The question is, how is this done with telephone communications? I know that I can edit project settings and select ipad / iphone for the target device. But what should I do in my code to make it work correctly?

Since this is html, I control the size in html (and jquery). For example, in my iphone application, I might have:

<img src="asdf.jpg" width="480"> 

And then the same ipad application will be:

 <img src="asdf.jpg" width="1024"> 

It would be really cool if I could just have two html files in my www folder, say index.html and index-ipad.html, and then they share the img, css and js shared folders. Is it possible?

I carefully scanned the documents by phone and found nothing. Can someone point me to a tutorial to do this? I really hate having multiple apps in the app store for the same content.

CHANGE IN COMMENTS BELOW

Perhaps I would not use the width attribute in html, perhaps I would do this:

 <img src="asdf_ipad.jpg"> 

and

 <img src="asdf_iphone.jpg"> 

where two images were calculated for two devices. In any case, I can handle html / js / css, I just need to know how to implement the “switch” so that the ipad is different from the iphone.

Answer 1

You can specify which PhoneGap file is opened initially. Take a look at the app: didFinishLaunchingWithOptions from AppDelegate.m

Do something similar to open another index page for the 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 multimedia queries to identify your target device and, if necessary, update images? JqueryMobile, for example, does this to provide high-resolution icons for Retina devices ...

Here's an article on how to use the ones that use different styles for iPhone and 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 that the logic for deviceType pretty straightforward (for example, the iPad is locked in a portrait), you will need to expand the logic to handle orientations and possibly add another logic to detect Retina devices and future iPads of higher resolution.

Answer 4

Well, I found a solution, I just use javascript to redirect the page to another html page as follows:

 if(screen.width==768) window.location='index-ipad.html'; 

So, I have this code in my index.html file, and of course I have another index-ipad.html file. This gives me the freedom to do whatever I want and not limit me to minor style changes. Please note: this does not work inside jquery onload stuff $ (function () {}); go figure.

I would prefer to resolve this using the "server side" approach, which means the object c-layer that it extends to. But, unfortunately, my skills in the c lens do not quite match. If anyone can give me this solution, I would really appreciate it!