phonegap ipad/iphone, tengo una sola aplicación en ambos dispositivos

Question

Así que he estado haciendo desarrollo de phonegap por un tiempo y he hecho un par de aplicaciones en la tienda de aplicaciones. He hecho aplicaciones para iphone y ipad y las he vuelto completamente independientes. Sé que Apple permite la presentación de una sola aplicación que se puede formatear para ambos dispositivos, mi pregunta es ¿cómo se hace esto con phonegap? Sé que puedo editar la configuración del proyecto y seleccionar ipad/iphone para el dispositivo de destino. Pero, ¿qué debo hacer en mi código para que funcione correctamente?

Como es html, controlo el tamaño en html (y jquery). Por ejemplo en mi aplicación para el iPhone, que podría tener:

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

Y luego esa misma aplicación para el iPad sería:

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

Sería realmente impresionante si puedo tener dos archivos html en mi www carpeta, por ejemplo, index.html e index-ipad.html, y luego comparten las carpetas comunes img, css y js. es posible?

He revisado los documentos en phonegap extensamente y no he podido encontrar nada. ¿Alguien puede indicarme un tutorial para hacer esto? Realmente odio tener varias aplicaciones en la tienda de aplicaciones para el mismo contenido.

EDITAR POR comentario abajo

Tal vez no usaría el atributo width en HTML, tal vez me gustaría hacer esto:

<img src="asdf_ipad.jpg"> 

y:

<img src="asdf_iphone.jpg"> 

donde el dos imágenes han sido dimensionadas para los dos dispositivos. En cualquier caso, puedo manejar el html/js/css, solo necesito saber cómo implementar un "interruptor" para que el ipad se diferencie del iphone.

Answer 1

Puede especificar qué archivo se abrirá PhoneGap inicialmente. Echar un vistazo a la aplicación: didFinishLaunchingWithOptions de AppDelegate.m

hacer algo como esto para abrir una página de índice diferente para 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

Una opción:

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

Nota la lógica deviceType es bastante simple (es decir, iPad bloqueado en vertical), tendrá que ampliar la lógica de manejar orientaciones y potencialmente añadir aún más lógica para detectar dispositivos de retina y en el futuro iPads de mayor resolución.

Answer 3

¿por qué no utilizar las consultas de medios de CSS para identificar su dispositivo de destino y actualizar las imágenes según corresponda? JqueryMobile, por ejemplo, hace esto para proporcionar iconos de alta resolución a los dispositivos Retina ...

Here's an article sobre cómo usarlos para aplicar diferentes hojas de estilo a iPhone vs iPad.

Espero que esto ayude!

Answer 4

Bueno, he encontrado una solución, sólo tiene que utilizar javascript para enviar la página a mi otra página HTML así:

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

Así que sólo tienen ese código en mi archivo index.html, y luego, por supuesto, tengo un archivo index-ipad.html diferente. Esto me da la libertad de hacer lo que quiera y no limitarme solo a pequeños cambios de estilo. Tenga en cuenta que esto no funcionó dentro de jquery onload stuff $ (function() {}); Imagínate.

Hubiera preferido resolver esto con un enfoque de "lado del servidor", es decir, la capa objetiva c en la que se basa. Pero, desafortunadamente, mis habilidades en el objetivo c no están a la altura. Si alguien puede darme esa solución, ¡lo agradecería muchísimo!