Question

We are considering using PhoneGap for an iPad application that we are developing. We would prefer to develop it in HTML5/CSS3/JS (which we are very familiar with), so the PhoneGap framework is obviously attractive to us.

I do, however, have one question. Our client will be using the application on an iPad, but connecting to an HD display to mirror the content. The problem is the iPad at 4:3 and the HD screen at 16:9. Using pure Objective-C, we have read about ways to display different content to the second screen and/or scale it up (to prevent black bars on the sides).

My question is, can we solve this with PhoneGap? Is responsive CSS capable of handling this? Using CSS3 Media Queries, etc? Or would we have to go down the route of developing an Objective-C app from the ground up?

Cheers!

Answer 1

From my experience things like Media Queries work very poorly in PhoneGap. For example while PhoneGap sets you with the following in your index.html page:

<link media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" rel="stylesheet" />

I couldn’t get it to work no matter how I changed things, I ended up having to add in conditional css using the following javascript:

loadDeviceStyle: function() {
  $("head").append("<link>");
  css = $("head").children(":last");
  css.attr({
    rel:  "stylesheet",
    type: "text/css",
    href: 'css/' + Utils.device() + '.css'
  });
}

Which is obviously less than ideal. I also found the viewport settings to be a major hassle and had to code my way around it. While it was likely an error on my side, the documentation didn’t help me clear up the issues, so prepare to spend time on it.

With all that said – because PhoneGap is easy to setup quickly – I’d try to create a proof of concept for what you’re trying to do. The hours you spend answering this question definitively will certainly translate into less headaches down the road.