jueves, 19 de febrero de 2015

WebView responsive de una web no responsive

Operación a realizar

Lo que quería realizar era un WebView de una página web que me gusta entrar todas las semanas.

Problema

Esa web no era responsive así que conseguir que el WebView se viera de correctamente en todos los dispositivos, necesité hacer múltiples búsquedas en internet para ver como hacer que se adaptara correctamente.

Búsqueda

Lo que más buscaba era como ver la página web en el móvil sin que tuviera ningún zoom puesto, para que nos entendamos, que la web se viera tal cual se vería desde un navegador recién instalado.
Solución

Una de las soluciones para casi todos lo móviles es utilizar estas líneas en el WebSetting del WebView:

web.setInitialScale(1);
webSet.setUseWideViewPort(true);
webSet.setLoadWithOverviewMode(true);

Vamos por partes, el setInitialScale(1); es el porcentaje de zoom que le queremos hacer.

2º el setUseWideViewPort(true); se utiliza para que si la web tiene un meta tag con el valor "viewport" coge ese valor y lo utiliza para mostrar el WebView con el tamaño que hay en ese meta tag. Si es false, la web se pone con el ancho del WebView.
En mi caso, si se pone a false, se ve la pantalla completamente en negro.

3º el webSet.setLoadWithOverviewMode(true); sirve para que el WebView salga sin zoom y así el contenido de la web que queremos mostrar encaje con el ancho de la web.

Ésto sería válido para la mayoría de lo móviles, pero en mi caso a un par de amigos se les veía con zoom la web(aunque podían quitarlo y quedaba perfectamente) y por eso seguí buscando hasta que encontré otra solución que complementa la anterior.

La solución complementaria es que en vez de cargar la url con web.loadUrl("http://miweb.com") lo que hago es un archivo index.html que lo agrego a la carpeta "assets" del proyecto.

En ese index.html tengo este código:

<html>
        <head>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
               <meta name="viewport" content="user-scalable=yes"/>
               <script type="text/javascript">
                      function poponload()
                      {
                             window.open("http://miweb.com/", "_self");
                      }
               </script>
               </head>
        <body onload="javascript: poponload()">
        </body>
</html>
En ese index.html lo más importante que hago es que el meta le pongo el valor "viewport" para que así el método .setUseWidePort(true) encuentre ese meta tag y la web se pueda adaptar al móvil.

Para cargar ahora este archivo "index.html" al WebView hay que poner esta línea:

web.loadUrl("file:///android_asset/index.html");

1 comentario:

  1. hola ya ise una app de mi pagina web usando el webview pero cuando intento descargar archivos no se inicia la descarga

    ResponderEliminar