Using one PhoneGap Build project to make both Android and IOS apps

Question

I've only built one app so far and was not able to use a single project to build both an Android and IOS app. I had to make two projects with the only real difference being the css file. I was not able to figure out how to make media queries correctly pull in the correct images for both devices in the same css file.

I'm wondering if this is a common solution or is there a reliable css file that can correctly load the right images for both IOS and Android?

why don't you have two different css files in the same project and load the required one on the basis of the OS. — SHANK, Apr 20 '13 at 10:30

score 2 · Answer 1 · edited May 23 '17 at 11:52

An alternative to media queries might be to do the platform detection with Javascript and the PhoneGap device API.

Example from the PhoneGap Documentation:

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"
//   - "WinCE"
//   - "Tizen"
var devicePlatform = device.platform;

And then depending on the platform you could load your css file dynamically.

Example to load a css file dynamically:

var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

source: https://stackoverflow.com/a/9345038/702478

score 0 · Answer 2 · answered Apr 22 '13 at 14:51

As alternate approach, instead of detecting device widths I'm focusing detecting pixel ratios. So far this seems to be more reliable.

In the css file use a base class and then a 2x class:

.some-image { background-image: url(../images/1x/icons/someicon.png);
              height:32px;
              width:32px;
 }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* 2x version of image */

    .some-image { background-image: url(../images/2x/icons/someicon.png);
                  height:32px;
                  width:32px;

    }

}

Using one PhoneGap Build project to make both Android and IOS apps

2 Answers2