2012-09-03 21 views
5

Tengo un sitio web con la metaetiqueta <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">, Javascript que formatea el css para body para ancho y alto de pantalla, y los elementos que tienen anchuras basadas en porcentaje.Tamaño del elemento de configuración del navegador Android demasiado pequeño

En el escritorio, esto funciona bien. Sin embargo, en los navegadores de mi teléfono y tableta Android, el contenido no está escalando correctamente, todo es demasiado pequeño y tocando dos veces para acercar el zoom al tamaño correcto (sin mostrar todo el ancho de la página). Esto ocurre tanto en modo vertical como horizontal, y el nivel de zoom parece ser idéntico, o al menos similar.

Tengo una alerta que aparece diciendome que javascript ha formateado el ancho y el alto del cuerpo, y siempre es correcto, pero el navegador siente la necesidad de cargar como si el tamaño de la ventana fuera realmente mayor.

Entiendo que hay algunos disparates donde los navegadores se confunden entre los píxeles CSS y los píxeles reales, pero pensé que la metaetiqueta se suponía que solucionaría todo eso.

Entonces, ¿cómo hago para que el navegador cargue la página a un tamaño de pantalla real del 100%, y no a algún tipo de ~ 125% de tamaño?

Respuesta

1

Añadir

user-scalable=no 

a su puerto de vista meta-tag, esto (al menos en mis pruebas) obliga a que el navegador muestre en el ancho especificado en lugar del usuario/navegadores preferencia.

Cuestiones relacionadas