¿Cómo consigo que el navegador WVGA Android deje de escalar mis imágenes?

Estoy diseñando una página HTML para mostrar en los navegadores de Android. Considere esta sencilla página de ejemplo:

<html> <head><title>Simple!</title> </head> <body> <p><img src="http://sstatic.net/so/img/logo.png"></p> </body> </html> 

Se ve muy bien en los teléfonos estándar HVGA (320×480), pero en HDPI WVGA tamaños (480×800 o 480×854) el navegador incorporado automáticamente escalas de la imagen hacia arriba, Se ve feo

He leído que debería ser capaz de usar esta etiqueta para forzar al navegador a dejar de escalar mi página:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 

… pero todo lo que hace es desactivar la escala de usuario (los botones de zoom desaparecen); En realidad no impide que el navegador de escala de mi imagen. El ajuste de los factores de escala (ajustándolos todos a 2,0 o 0,5) no tiene ningún efecto en absoluto.

¿Cómo puedo obligar al navegador WVGA a detener el escalado de mis imágenes?

Ah, lo encontró buscando en el código fuente de Android. Hay una nueva especificación específica para Android " target-densityDpi " disponible en la metaetiqueta "viewport"; Por lo que puedo decir, es totalmente indocumentado, excepto para el comentario de registro!

Agregue soporte de dpi para WebView.

En la metaetiqueta "viewport", puede especificar "target-densityDpi". Si no se especifica, utiliza el valor por defecto, 160dpi a partir de hoy. Entonces, el factor de escala 1.0 especificado en la etiqueta de ventana significa 100% en G1 y 150% en Sholes. Si establece "densidad de destino-DP" en "dispositivo-dpi", el factor de escala 1.0 significa 100% tanto en G1 como en Sholes.

Implementado Safari's window.devicePixelRatio y css media query device-pixel-ratio.

Así que si usas "device-dpi" y modificas el css para font-size e image src dependiendo de window.devicePixelRatio, puedes obtener una página mejor en Sholes / Passion.

Aquí hay una lista de opciones para "target-densityDpi".

Device-dpi: Utiliza el dpi nativo del dispositivo como dpi de destino. Dpi-dpi: 120dpi media-dpi: 160dpi, que también es el predeterminado a partir de hoy alto-dpi: 240dpi: Tomamos cualquier número entre 70 y 400 como un objetivo válido dpi.

Ahora forma parte de la documentación de la API para WebView: http://developer.android.com/reference/android/webkit/WebView.html

Consulte la sección titulada Creación de páginas web para admitir diferentes densidades de pantalla

  • Android 2.3.4 - La contraseña de tipo de entrada de HTML tiene frontera en el enfoque
  • Navegador Android: Javascript window.innerWidth devuelve un valor incorrecto
  • ¿Puede una aplicación web móvil obtener información de identificación del dispositivo Android?
  • WebView hace que SQLiteDiskIOException
  • ¿Qué hacen exactamente setUseWideViewPort () y setLoadWithOverviewMode ()?
  • ¿Incluyendo la versión webkit utilizada en el navegador Android?
  • Twitter Bootstrap modal en dispositivos móviles
  • ¿Visualización de archivos de activos de Android en un WebView?
  • ¿Hay alguna forma de eliminar el retraso de clics en los dispositivos móviles de contacto?
  • CSS: -webkit-touch-callout alternativas para android
  • Incorporación de una versión más reciente de WebKit con la aplicación para Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.