Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Cómo ajustar la página web al ancho de la webview cuando se cambia el tamaño de la vista web (sin recargar)

Tengo una página HTML y una vista web de pantalla completa en Android. El contenido HTML es mayor que el área visible de la vista web. Quiero ajustar el contenido HTML al ancho de webview.

Lo que es realmente importante es esto: cuando la orientación del dispositivo cambia, la vista web no se volverá a cargar, lo que significa que sólo cambiará el tamaño y que el contenido seguiría ajustándose al ancho.

Una cosa más: debido a que el contenido se ha reducido, el usuario puede ampliarlo a una escala máxima del 100%. Cuando el contenido se amplía y la orientación cambia, quiero que el contenido vuelva a encajar en el ancho.

Editar 1 : puedo cambiar las etiquetas meta en la cabecera de HTML, pero su contenido sigue siendo mayor que el área visible de la webview. Estoy soportando Android 2.3 y versiones posteriores.

Editar 2 : Gracias por la sugerencia sobre diseño web sensible. Sé lo que es y lo puedo hacer. El problema es que no puedo cambiar gran parte del contenido HTML en este caso.

TL: DR : Cómo ajustar siempre un contenido HTML mayor a la anchura de una webview de Android a medida que se redimensiona la vista web, sin recargar el contenido. (Puedo cambiar la webview, no mucho del HTML.)

  • Establecer credenciales en una vista Web de Android mediante una conexión HTTPS segura
  • Color de fondo de Android WebView
  • Centro alinear el problema del marcador de posición en android
  • Aceleración de hardware WebView de Android
  • ¿Hay alguna manera de desactivar la función de zoom en los campos de entrada en la vista web?
  • Actividad de Android como diálogo, pero sin una barra de título
  • WebView con un androide IFRAME
  • Vista web android con certificado de cliente
  • 5 Solutions collect form web for “Cómo ajustar la página web al ancho de la webview cuando se cambia el tamaño de la vista web (sin recargar)”

    hacer los siguientes ajustes

    webview.getSettings().setUseWideViewPort(true); webview.getSettings().setLoadWithOverviewMode(true); 

    Esto puede sonar como una respuesta de cop-out, pero creo que depende de cómo está construyendo el resto de su sitio. Siempre que trabajo en sitios responsivos, uso:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Esto hará dos cosas: width=device-width encontrará el ancho de su dispositivo y enviará estilos de su CSS que coincidan con ese tamaño (puede configurar estilos para tamaños específicos en su CSS, usando consultas de medios). Initial-scale=1 hará que el sitio aparezca al 100% cuando se cargue, pero aún así dar a los usuarios la opción de acercar.

    Si su sitio está desarrollado para un ancho específico, puede probar con:

    <meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">

    Esto reducirá el tamaño de su sitio para ajustarse al ancho del dispositivo. Nada super especial aquí, los usuarios básicamente sólo se mostrará mini-sitios de escritorio.

    Yo recomendaría leer este artículo de Webdesign Tuts + . Explican bien la metaetiqueta de la ventana gráfica, con ejemplos.

    No necesitas cambiar nada en Webview, todo lo que necesitas es una página Html responsiva, si eres diseñador entonces resolverás tu problema o puedes publicar una parte de tu pregunta con la etiqueta de la interfaz de usuario.

    Para construir html Responsive páginas u puede visitar: AQUÍ

    Resultado: Necesitas probar en webview mientras creas tu página html sensible, navegador predeterminado de android mismo refleja que ur página html es sensible o no. Una vez que funcionará en brower predeterminado en dispositivo Android, entonces funcionará en cualquier webview en android.

    Pruebas: puede probar la página html de respuesta de ur AQUÍ

    Tendría que ver la fuente de su HTML y CSS. Tienes que usar exclusivamente tamaños de% y nunca usar tamaños de px anchos fijos. A continuación, el usuario puede cambiar el tamaño del navegador y se redimensionará dinámicamente. También uso% widths debido a esto. También cambia de tamaño dinámicamente si utiliza CTRL-MouseWheel (zoom).

    aquí hay una sugerencia para webdesign responsivo:

    use posiciones en lugar de anchos:

    ex

    Html

     <div id="somediv">I'm just a div, just a regular div.</div> 

    Css

     #somediv { left: 0; /*numeric value in pixels you would like this div to be from the left */ right: 0; /*same as above, except on the right */ height: 50px; width: auto; } 

    la div anterior cambiará automáticamente el tamaño según el ancho de pantalla.

    editar: la respuesta debajo de la mina le ayudará mucho también.

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.