Использование одного проекта PhoneGap Build для создания приложений для Android и IOS

Question

Пока что я создал только одно приложение и не смог использовать один проект для создания приложения для Android и IOS. Я должен был сделать два проекта с единственной реальной разницей, являющейся файлом css. Мне не удалось выяснить, как правильно настроить медиа-запросы на правильные изображения для обоих устройств в одном файле css.

Мне интересно, является ли это распространенным решением или есть надежный файл css, который может правильно загружать правильные изображения для IOS и Android?

Answer 1

Как альтернативный подход, вместо обнаружения ширины устройства, я фокусируюсь на определении отношения пикселей. Пока это кажется более надежным.

В файле CSS используется базовый класс, а затем класс 2x:

.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; 

    } 

} 

Answer 2

Альтернативой запросов СМИ может быть, чтобы сделать обнаружение платформы с Javascript и PhoneGap device API.

Пример из документации PhoneGap:

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

А потом в зависимости от платформы вы можете загрузить файл CSS динамически.

Пример для загрузки файла CSS динамически:

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

Источник: https://stackoverflow.com/a/9345038/702478