Viewport ajusta el ancho de la pantalla y las grandes imágenes

Estoy intentando utilizar un WebView para exhibir una imagen grande con el multitouch incorporado e intentar evitar choques de la memoria.

Puse la webView de esta manera:

setInitialScale(20); WebSettings settings = getSettings(); settings.setJavaScriptEnabled(true); settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(true); settings.setBuiltInZoomControls(true); 

A continuación, cargue el código siguiente:

 <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> </head> <body style="margin: 0; padding: 0"> <img alt="image" src="THE_SRC_GOES_HERE" id="theImage" > </body> 

El problema es que si carga una imagen mediana (1600×1200 por ejemplo) funciona bien y la imagen se ajusta al ancho de la pantalla.

Introduzca aquí la descripción de la imagen

Pero si la imagen es más grande 7300×5200 en mi ejemplo, parece como ampliado y con el zoom fuera desactivado.

Introduzca aquí la descripción de la imagen

Si desea probar las urls de las imágenes son:

Img1 & img2

NOTA: No soy el propietario de esas imágenes y sólo lo estoy utilizando para las pruebas

Creo que tus imágenes siguen siendo más grandes que la ventana de visualización de forma predeterminada. Prueba esto

 <html> <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> </head> <body style="margin: 0; padding: 0"> <img alt="image" src="http://www.deviantart.com/download/165022929/Wallpaper_2010_by_scrumen.png" id="theImage" style="width:100%" > </body> </html> 

No sabe la respuesta correcta pero un posible walkarround se podría establecer el img max-width a un "valor no muy alto" por ejemplo 2 * screen.width cuando la página se carga

Realmente tengo esto trabajando en ICS haciendo algo un poco contra-intuitivo. Mientras que otros están sugiriendo agregar el style="width:100%" a la etiqueta del img , mi solución es realmente agregar style="height:100%" lugar de otro.

Esto funciona para mí en mi Android 4.0 + dispositivos, pero por desgracia comienza parcialmente ampliado (por lo que la altura de la imagen llena la vista) en mis dispositivos más antiguos.

  1. Evita el problema de espacio en blanco en todos los dispositivos que probé.
    • ICS muestra espacio en la vista inicial totalmente zoom, pero al acercar, desaparece exactamente como se desea.
    • En dispositivos más antiguos, nunca hay espacio en blanco por debajo, debido al nivel de zoom inicial.
  2. El zoom no es perfecto, pero mucho mejor.
    • En ICS, obtiene exactamente lo que quiere (coincide con el ancho).
    • En los dispositivos más antiguos, el zoom es significativamente más manejable que lo que obtienes en tu segundo ejemplo en la pregunta.

En resumen, he cumplido sus requisitos en ICS y le he conseguido mucho más cerca de ellos en dispositivos más antiguos. Voy a editar mi respuesta si me propongo algo más, pero esto parece vale la pena compartir en este punto, incluso si es imperfecto.

¿Qué tal esto: (retractado – todavía no funciona bien)

 <html> <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body style="margin: 0; padding: 0"> <img onload="view = new Viewport(this.width, this.height)" alt="image" src="http://orbitingeden.com/orrery/textures/stars.jpg" id="theImage" > <script> Viewport = function(width, height){ var theImage = document.getElementById('theImage'); this.width = width; this.height = height; this.set = function(){ var metas = document.getElementsByTagName('meta'); for(i=0; i<metas.length; i++){ if(metas[i].name == 'viewport'){ metas[i].setAttribute('content','width=' + width + ', height='+ height + ', user-scalable=yes'); theImage.style.width = '100%'; } } } this.set(); } $('body').bind("gesturechange", function(event) { view.set(); }); </script> </body> </html> 

Estoy más de un desarrollador web, aquí está el código que funciona en el navegador Android ics, esto debería funcionar igual en una webview:

 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width"> <style> html,body{ width:100%; height:100%; margin:0; padding:0; } #my-image{ width:100%; margin:0; padding:0; } </style> </head> <body> <img id="my-image" src="http://gachie.blog.com/files/2011/06/tour_eiffel.jpg"/> </body> 

Lo intenté también que una imagen mucho más grande ( http://macjacart.ca/admin/Product_Images/8UhBphVEae.jpg ) y funcionó suavemente.

¡Espero eso ayude!

[EDITAR]

Ya que no tengo suficiente espacio para publicarlo en los comentarios, lo pondré allí:

Lo que quieres es básicamente para cortar la parte inferior de la ventana tan pronto como su altura de la imagen toma la pantalla completa. Usted necesita un poco de javascript para hacer eso, y ya que el javascript no tiene un evento de zoom, no va a requerir algunos hacks. Desde el flash de soporte de android, puede probar esta solución para obtener un evento de zoom. Tan pronto como el zoom alcance un cierto nivel, que depende de la proporción de la imagen, actualiza el css de la imagen con una altura: 100% y establece el ancho en automático.

Básicamente puede limitar el ancho o la altura dependiendo de cuál es el 100%. También es posible que desee configurar la altura progresivamente al 100%, ya que el usuario está haciendo zoom, de cualquier manera, verá un "salto" en algún momento.

Echa un vistazo a este post, así, esto podría ayudarle.

  • Incluya algunas páginas en una página en JQuery móvil
  • Cómo forzar el teclado con números en el sitio web para móviles en Android
  • Guardar / restaurar estado de android webview
  • Habilitación de la compatibilidad con WebGL para Android WebView
  • WebView en Galería deteniendo eventos de desplazamiento / toque
  • Abrir url en la vista web - phonegap
  • Abrir vínculos externos en el navegador con la vista web de Android
  • Mantener sesión de cookie en Android
  • Pinch de la vista web de Android zoom local image
  • ¿Cómo se muestran 2 vistas en 1 actividad (android)?
  • ¿Cómo puedo panoramizar una webview en google glass
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.