phonegap ipad/iphone, есть одно приложение на обоих устройствах

Question

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

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

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

А потом тот же Ipad приложение будет:

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

Было бы замечательно, если я могу просто иметь два HTML файлы в моем WWW папку, скажем, index.html и index-ipad.html, а затем они обмениваются общими папками img, css и js. Это возможно?

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

EDIT PER COMMENT НИЖЕ

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

<img src="asdf_ipad.jpg"> 

и:

<img src="asdf_iphone.jpg"> 

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

Answer 1

Вы можете указать, какой файл PhoneGap открывается первоначально. Посмотрите приложения: didFinishLaunchingWithOptions из 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

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

<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 и в будущем iPads более высокого разрешения.

Answer 3

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

Here's an article о том, как использовать те, которые применяются к различным стилям для iPhone и iPad.

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

Answer 4

Ну, я нашел решение, я просто использовать JavaScript, чтобы переслать страницу в мой другой HTML-страницы, как это:

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

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

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