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?
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);
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;
}
}