El soporte para target-densitydpi se elimina de WebKit

Question

De acuerdo con este https://bugs.webkit.org/show_bug.cgi?id=88047, WebKit eliminó el soporte para target-densitydpi de parámetros de ventana gráfica. Lamentablemente, la descripción del error no indica la motivación para el cambio ni la solución.

Ciertas páginas web que querían evitar la descamación en dispositivos móviles tenían la siguiente declaración de la ventana gráfica:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, 
user-scalable=no, target-densitydpi=device-dpi"/> 

Ahora bien, este código genera un error en Chrome (probado con 21.0.1180.49 beta-m). Por favor, indique cuál es la supuesta forma de crear una página web sin los mensajes de error y mantenga el mismo comportamiento que antes con target-densitydpi = device-dpi "

Answer 1

El hilo de la lista de distribución webkit-dev http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html contiene una discusión (o al menos el fondo) de la eliminación de características

En resumen, WebKit tenía algunos medios para escalar la página cuando se procesaba en un dispositivo, y esto era muy confuso (más aún dado que cada plataforma dependía de su propio enfoque) a este)

ACTUALIZACIÓN:.

De acuerdo a un comentario sobre dicha rosca por Adam Barth, el autor parche mencionado,

Hay cierta preocupación de que la diana densitydpi es utilizado por algunas aplicaciones que se incluyen con Android, pero la gente parece dispuesto a despreciar la característica y migrar esas aplicaciones a otros mecanismos, como imágenes sensibles y unidades de dispositivo CSS.

Como puede ver, las imágenes receptivas y las unidades de dispositivo CSS parecen ser las "soluciones" recomendadas para lo que el atributo target-densitydpi proporcionó. Además, otro comentario sobre el mismo hilo mencionó el hecho de que incluso con este atributo en su lugar, los desarrolladores web tendrían que volver a implementar la misma página de otra manera, para entornos de navegador que no admitan el atributo.

Creo que el subpixel layout recientemente introducido se convertirá en otro medio para mitigar el problema de eliminación de atributos.

ACTUALIZACIÓN 2

This blog post sugiere una forma alternativa para la disposición de su página para Android Chrome. No hay ninguna solución que te permita automáticamente "mantener el mismo comportamiento" de tus páginas. Solo tienes que re-arquitecturarlos un poco.

Answer 2

¿Has intentado con minimum-scale? Lamentablemente, no tengo un teléfono Android, así que no puedo probarlo por ti.

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

Answer 3

no estoy seguro, pero tal vez es posible emular target-densitydpi mediante el establecimiento de "ancho" en la metaetiqueta vista para ser igual al ancho de la pantalla en píxeles "físicos".Por desgracia, que yo sepa, no hay manera de conseguir el 100% ancho de píxel dispositivo, sino algo así como

<meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<script> 
if(navigator.userAgent.toLowerCase().indexOf('android') > -1) 
    document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); 
</script> 

debería funcionar en la mayoría de los androides (James Pearce: First, Understand Your Screen).

Answer 4

he logrado lo mismo en la última Chrome para Android que utiliza este jQuery:

<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'> 

var viewPortScale = 1/window.devicePixelRatio; 

$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width'); 

Ajusta la ventana de ajuste de etiquetas meta escala inicial a la escala correcta por 1 píxel CSS == 1 pixel del dispositivo.

No puede usar 'width =' + screen.width porque screen.width no devuelve las dimensiones del píxel físico. Intenté usar http://responsejs.com/labs/dimensions/ en mi Nexus 7 en Chrome y todos los números son píxeles de la ventana gráfica.