CODEWITHSUNDEEP
cordovaphonegap-build
DLL
DLL

Reputation: 541

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

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?

Upvotes: 1

Views: 1460

Answers (2)

Sven
Sven

Reputation: 1887

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

Upvotes: 2

DLL
DLL

Reputation: 541

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;

    }

}

Upvotes: 0

Related Questions