adaptar el contenido de la web móvil usando la metaetiqueta de la ventana gráfica

Estoy intentando descubrir cómo aprovechar la metaetiqueta de la vista móvil para acercar automáticamente los contenidos de una página HTML para que quepa en una vista web.

Restricciones:

  • El HTML puede tener o no elementos de tamaño fijo (por ejemplo, exg tiene un ancho fijo de 640). En otras palabras, no quiero obligar al contenido a ser fluido y usar% ‘s.
  • No sé el tamaño de la vista web, solo sé su relación de aspecto

Por ejemplo, si tengo una sola imagen (640x100px), quiero que la imagen se aleje si la vista web es de 300×250 (escala abajo para encajar). Por otro lado, si la vista web es de 1280×200, quiero que la imagen se acerque y complete la vista web (ampliar para ajustarse).

Después de leer los documentos de android y los documentos de iOS en las ventanas gráficas, parece simple: como conozco el ancho de mi contenido (640), configuro el ancho de la ventana gráfica a 640 y dejo que la vista web decida si necesita escalar el contenido hacia arriba o hacia abajo para adaptarse a la vista web.

Si pongo lo siguiente en mi navegador de Android / iPhone O en una vista web de 320×50, la imagen no se aleja para ajustarse al ancho. Puedo desplazar la imagen a la derecha e izquierda ..

   Test Viewport   html, body { margin: 0; padding: 0; vertical-align: top; } h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; vertical-align: top; }       

¿Qué estoy haciendo mal aquí? ¿La metaetiqueta de la ventana gráfica solo hace zoom en el contenido que es <el área de la vista web?

En la cabeza agrega esto

 //Include jQuery   

Creo que esto debería ayudarte.

  

Dime si funciona

P / s: aquí hay alguna consulta de medios para dispositivos estándar. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Para Android, se agrega la etiqueta de densidad de destino.

 target-densitydpi=device-dpi 

Entonces, el código se vería

  

Tenga en cuenta que creo que esta adición es solo para Android (pero ya que tiene respuestas, sentí que esto era un buen extra), pero esto debería funcionar para la mayoría de los dispositivos móviles.

ok, aquí está mi solución final con javascript 100% nativo:

   

Si agrega style="width:100%;max-width:640px" a la etiqueta de la imagen, se escalará hasta el ancho de la ventana gráfica, es decir, para ventanas más grandes se verá como ancho fijo.

Intente agregar un estilo = “ancho: 100%;” a la etiqueta img De esta forma, la imagen llenará todo el ancho de la página, reduciendo así la escala si la imagen es más grande que la ventana gráfica.

Tenía el mismo problema que el suyo, pero mi preocupación era la vista de lista. Cuando bash desplazarme por la lista, veo que el encabezado fijo también se desplaza un poco. El problema fue la altura de la vista de lista más pequeña que la altura de la ventana gráfica (navegador). Solo necesita reducir la altura de su ventana gráfica más baja que la altura de la etiqueta de contenido (vista de lista dentro de la etiqueta de contenido). Aquí está mi metaetiqueta;

  

Espero que esto ayude. Thnks.