android - Cómo ajustar la página web al ancho de webview cuando se redimensiona webview(sin volver a cargar)

resize orientation

Question

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

Lo que es realmente importante es esto: cuando cambie la orientación del dispositivo, la vista web no se volverá a cargar, lo que significa que simplemente se redimensionará y el contenido aún se ajustará 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 se ajuste nuevamente al ancho.

Edición 1 : puedo cambiar las metaetiquetas en la cabecera de HTML, pero su contenido sigue siendo más grande que el área visible de la vista web. Estoy apoyando Android 2.3 y versiones posteriores.

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

TL; DR : Cómo ajustar siempre un contenido HTML más grande al ancho de una vista web de Android a medida que la vista web cambia de tamaño, sin volver a cargar el contenido. (Puedo cambiar la vista web, no mucho del HTML.)

Answer 1

No necesita cambiar nada en Webview, todo lo que necesita es una página de HTML receptivo. Si es diseñador, eso solucionará su problema o puede publicar una parte de su pregunta con etiqueta de interfaz de usuario.

Para crear páginas html Responsive puedes visitar: HERE

Resultado: debe realizar una prueba en webview mientras crea su página html responsiva, el navegador predeterminado de Android refleja que su página html responde o no. Una vez que funcione en el navegador predeterminado en el dispositivo Android, funcionará en cualquier vista web en Android.

Pruebas: puedes probar tu página html responsiva HERE

Answer 2

Aquí hay una sugerencia para un diseño web sensible, use posiciones en lugar de anchos:

Por ejemplo:

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 división anterior se redimensionará automáticamente según el ancho de la pantalla.

Answer 3

Esto puede parecer una respuesta descabellada, pero creo que depende de cómo construyas el resto de tu sitio. Cuando trabajo en sitios receptivos, uso:

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

Esto hará dos cosas: width=device-width buscará el ancho de su dispositivo y enviará estilos desde 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 se muestre al 100% cuando se cargue, pero aún así le dará a los usuarios la opción de acercarse.

Si su sitio está desarrollado para un ancho específico, puede intentar usar:

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

Esto solo reducirá su sitio para que se ajuste al ancho del dispositivo. Nada muy especial aquí, básicamente a los usuarios solo se les mostrarán sitios de mini escritorio.

Recomiendo leer este artículo de Webdesign Tuts + . Explican bien la metaetiqueta del viewport, con ejemplos.

Answer 4

Tendría que ver la fuente de su HTML y CSS. Usted tiene que usar exclusivamente% tamaños y nunca usar tamaños de px de ancho fijo. Luego, el usuario puede cambiar el tamaño del navegador y cambiará su tamaño dinámicamente. También uso% anchos debido a esto. También se redimensiona dinámicamente si usa CTRL-MouseWheel (zoom).

Answer 5

hacer las siguientes configuraciones

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