PhoneGap Ipad / Iphone, есть одно приложение на обоих устройствах

Question

Итак, я некоторое время занимался разработкой телефонной пропасти и сделал пару приложений в магазине приложений. Я сделал приложения для iphone и ipad и разделил их. Я знаю, что Apple позволяет отправлять одно приложение, которое может быть отформатировано для обоих устройств. Мой вопрос: как это сделать с помощью телефонной пропасти? Я знаю, что могу отредактировать настройки проекта и выбрать ipad / iphone для целевого устройства. Но что мне делать в моем коде, чтобы заставить его работать правильно?

Поскольку это html, я контролирую размеры в html (и jquery). Например, в моем приложении для iphone у меня может быть:

<img src="asdf.jpg" width="480">

И тогда это же приложение для ipad будет:

<img src="asdf.jpg" width="1024">

Было бы здорово, если бы в моей папке www было всего два html-файла, скажем, index.html и index-ipad.html, а затем они использовали общие папки img, css и js. Возможно ли это?

Я тщательно проверил документы на телефоне и не смог ничего найти. Может кто-нибудь указать мне учебник, чтобы сделать это? Я действительно ненавижу иметь несколько приложений в магазине приложений для одного и того же контента.

РЕДАКТИРОВАТЬ ЗА КОММЕНТАРИЙ НИЖЕ

Может быть, я бы не использовал атрибут ширины в html, возможно, я бы сделал это:

<img src="asdf_ipad.jpg">

и

<img src="asdf_iphone.jpg">

где два изображения были рассчитаны для двух устройств. В любом случае, я могу обрабатывать html / js / css, мне просто нужно знать, как реализовать «переключатель», чтобы ipad отображал отличное от iphone.

Answer 1

Вы можете указать, какой файл PhoneGap открывается изначально. Взгляните на приложение: didFinishLaunchingWithOptions from AppDelegate.m

Сделайте что-то подобное, чтобы открыть другую страницу индекса для iPad:

if ([[[UIDevice currentDevice] model] containsString:@"iPad"]) {
    ...
    self.viewController = [[[MainViewController alloc] init] autorelease];
    self.viewController.wwwFolderName = @"www-ipad";
    self.viewController.startPage = @"index.html";
    ...
}

Answer 2

почему бы не использовать медиазапросы CSS для идентификации вашего целевого устройства и обновления изображений по мере необходимости? Например, JqueryMobile предоставляет значки высокого разрешения для устройств Retina ...

Вот статья о том, как использовать их для применения различных таблиц стилей к iPhone против iPad.

Надеюсь, это поможет!

Answer 3

Ну, я нашел решение, я просто использую javascript для перенаправления страницы на мою другую html-страницу, например:

if(screen.width==768)
    window.location='index-ipad.html';

Так что у меня просто есть этот код в моем файле index.html, а затем, конечно, у меня есть другой файл index-ipad.html. Это дает мне свободу делать все, что я хочу, и не ограничивает меня только незначительными изменениями стиля. Обратите внимание, что это не сработало внутри jquery onload stuff $ (function () {}); пойди разберись.

Я бы предпочел решить эту проблему "на стороне сервера", имея в виду целевой уровень c, на котором он находится. Но, к сожалению, мои навыки в цели c не совсем на должном уровне. Если кто-нибудь может дать мне такое решение, я был бы очень признателен!

Answer 4

Один вариант:

<img src="asdf.png" class="asdf"/>

.ipad .asdf {
  width: 1024px;
}
.iphone .asdf {
  width: 480px;
}

$(function() {
  var deviceType = (device.platform=='iPhone' && screen.width==768) ? 'ipad' : 'iphone';
  $('body').addClass(deviceType);
});

Обратите внимание, что логика deviceType довольно проста (т. Е. IPad заблокирован в портретной ориентации), вам нужно будет расширить логику для обработки ориентаций и потенциально добавить еще дополнительную логику для обнаружения устройств Retina и в будущих iPad с более высоким разрешением.