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:
- Force Android WebView fuera de línea
- En el enlace del navegador de Android no siempre se ejecuta onClick causando el foco en su lugar
- Android Studio - ¿Cómo cargar contenido HTML5 desde una ruta local usando Webview?
- ¿Por qué Android WebView no está cargando youtube HTML5 iframe video?
- ¿Cómo funciona evaluateJavascript?
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.
Pero si la imagen es más grande 7300×5200 en mi ejemplo, parece como ampliado y con el zoom fuera desactivado.
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
- Cómo establecer un título diferente para el cuadro de diálogo de alerta cuando se carga la página WebView?
- Vídeo con iframe no se muestra en la vista web de Android
- Accede a la cabecera de respuesta y al código de estado en la web en la aplicación para Android?
- Cómo mostrar un diálogo de progreso mientras se carga la página HTML en WebView
- Menú contextual en Android WebView
- Soporte para WebView de Android onReceivedClientCertRequest
- Mono para Android, el campo de entrada de WebView filechooser no funciona
- ShouldOverrideUrlLoading (...) no se ejecuta si "window.location.href" modificado en una devolución de llamada de tiempo de espera
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.
- 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.
- 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.
- Ninguna actividad encontrada para manejar Intent action.VIEW al hacer clic en el enlace de correo electrónico
- No se puede establecer el margen del elemento en ListView mediante adaptador personalizado