[SOLUCIONADO] WebApp para dispositivos Android

[manueltg]

Buenas, les comento:

Estoy desarrollando una aplicación web en HTML5 CSS3 y JavaScript para móviles con PhoneGap y resulta que me están surgiendo quebraderos de cabeza con el tema de la redimensión de la aplicación en diferentes dispositivos.

He leído sobre la etiqueta Viewport y de hecho es la que utilizo pero tengo lagunas con respecto a esto, o eso creo. Entiendo que el Viewport lo que hace es redimensionar la aplicación ajustándola a la pantalla de diferentes dispositivos siempre y cuando se le especifique, por ejemplo esta es mi etiqueta:

Código HTML:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 

Pero mi aplicación digamos que no se redimensiona. Yo quiero que se vea a pantalla completa ya sea en un dispositivo de 7 pulgadas como en uno de 9.7 o en 1 de 10.1, sin que queden bordes blancos ni nada por el estilo. He leído también sobre los media queries y el tema de las densidades de las pantallas pero no me queda del todo claro su uso ya que creo que con eso no consigo lo que realmente busco.

Resumiendo lo que busco es si me podéis orientar un poco sobre como poner mi aplicación ajustada en cualquier dispositivo Android, ajustándose esta totalmente a la pantalla del mismo.

Gracias de antemano.
Un saludo.

[ryugen]

La que se tiene que adaptar a todas los tamaños mediante un layout fluido o responsivo es tu aplicación Web. Utilizando por ejemplo media querys y tamaño dinamíco.
El meta "viewport" en si mismo no hace nada de eso. Su función es definir el tamaño del viewport y el zoom inicial (y sus valores máximos).

En tu caso estas inidicando que el ancho del viewport tiene que ser el ancho del dispositivo (width=device-width) y que el zoom inicial es 1 osea 1px = 1px. El máximo y el minímo es el mismo valor.

Definido esto, si tu web app no es capaz de adaptarse al ancho del dispositivo es un problema del layout de la misma y no de la etiqueta viewport.

[manueltg]

Muchas gracias por la respuesta, una última cosa, el uso de los media queries lo entiendo, pero me surge una pequeña/gran duda, existen multitud de tamaños de pantalla para las tablet, entonces lo que me gustaria saber es si para que mi aplicación quede totalmente ajustada a dicho tamaño de pantalla tendría que definir para cada tamaño un media querie ¿estoy en lo cierto?.

Se que los media queries tienen cierta flexibilidad en el sentido de que se pueden utilizar minimos y máximos pero no sé si van por ahí los tiros...

Otra duda que tengo es si debo utilizar tamaños en porcentajes o bien, utilizar los tamaños en pixeles fijos, ¿afecta esto a los media queries?

Gracias.
Un saludo.

[pzin]

Adaptar una web para todos y cada uno de los dispositivos que hay en un trabajo de chinos. -_-
Más que nada porque hay muchos dispositivos, y luego cada modelo diferente.

Por eso se trabaja con medidas relativas, haciendo un diseño fluido.

Por lo que sí, usa medidas relativas y no, no tienes porqué definir reglas específicas para cada dispositivo. Normalmente, si se optimiza bien, las reglas dentro de las media-queries no ocupan demasiado.

Un sistema de grillas simple, que pensando un poco puede hacer cualquiera, ayuda mucho y reduce considerablemente el diseño responsivo* —en serio, menuda palabrota que no existe .

* léase sensible

[manueltg]

Muchas gracias a los dos por las respuestas, investigaré sobre el tema.