name - Sentido de escalamiento de meta-viewport Android: ¿Qué me estoy perdiendo?

no me funciona el meta viewport

Question

He estado intentando determinar cómo la ventana gráfica y el contenido dentro se ven afectados por la metaetiqueta de la ventana gráfica utilizada para dibujar contenido con WebView o con el navegador nativo.

A lo que me he arriesgado son algunas inconsistencias aparentes. Creé una página pequeña (ver más abajo) con una imagen y algo de javascript para mostrar el tamaño de la ventana gráfica para poder ver visualmente la escala con la imagen y obtener los números exactos.

Primero, algunas observaciones:

1. Ninguno de los números de ancho de la ventana gráfica es exactamente lo que esperaba, solo cerca.
2. Cuando los números están cerca del conteo de píxeles del dispositivo, el dibujo se hace uno por uno, o al menos se ve visiblemente de esa manera.
3. Si el tamaño de la página (tamaño del documento) es menor que el tamaño de la ventana gráfica, los números de las ventanas se reducen. Es decir, la ventana gráfica no siempre representa necesariamente el máximo espacio visible posible, solo el espacio visible actual.
4. Del mismo modo, en el navegador nativo, el tamaño de la ventana gráfica se ajusta mediante la barra superior. El tamaño aumenta a medida que se desplaza fuera de la pantalla. Los números dados son para la visualización de pantalla completa.

Dispositivo n. ° 1: la pantalla física es de 1024 x 600 y está ejecutando Android 2.2.

1. escala inicial = 1.0 => 676x400
2. escala inicial = 1.0, ancho = ancho del dispositivo => 676x400
3. escala inicial = 2, ancho = ancho del dispositivo => 338x200
4. escala inicial = 2, ancho = ancho del dispositivo, target-densitydpi = device-dpi => 507x300
5. escala inicial = 0.5, ancho = ancho del dispositivo, densidad-destino = dpi-dispositivo => 800x473
6. escala inicial = 0.9, ancho = ancho del dispositivo, target-densitydpi = device-dpi => 800x473
7. width = device-width, target-densitydpi = device-dpi => 1014x600
8. escala inicial = 1.0, ancho = ancho del dispositivo, target-densitydpi = device-dpi => 1014x600
9. escala inicial = 0.5, ancho = ancho del dispositivo, target-densitydpi = dispositivo-dpi, escala mínima = 0.1 => 2028x768
10. escala inicial = 0.5, ancho = ancho del dispositivo, densidad-densidaddpi = dispositivo-dpi, escala mínima = 0.1, escalable por el usuario = no => 1014x600

Dispositivo n. ° 2: la pantalla física es 800x480 y está ejecutando Android 2.3.2.

1. escala inicial = 1.0 => 527x320
2. escala inicial = 1.0, ancho = ancho del dispositivo => 527x320
3. escala inicial = 2, ancho = ancho del dispositivo => 263x160
4. escala inicial = 2, ancho = ancho del dispositivo, target-densitydpi = device-dpi => 395x240
5. escala inicial = 0.5, ancho = ancho del dispositivo, densidad de destino = dpi del dispositivo => 790x480
6. escala inicial = 1.0, ancho = ancho del dispositivo, densidad-destino = dispositivo-dpi => 790x480
7. escala inicial = 0.5, ancho = ancho del dispositivo, target-densitydpi = dispositivo-dpi, escala mínima = 0.1 => 1580x768
8. escala inicial = 0.5, ancho = ancho del dispositivo, target-densitydpi = device-dpi, minimum-scale = 0.1, user-scalable = no => 790x480
9. width = 1580, target-densitydpi = device-dpi => 790x480
10. width = 1580, target-densitydpi = device-dpi => 790x480
11. width = 1580, target-densitydpi = device-dpi, minimum-scale = 0.1 => 790x480
    

De estos resultados, los siguientes no tienen sentido:

1. Dispositivo n. ° 1, elementos 5, 6 y 10
2. Dispositivo n. ° 2, elementos 5, 8, 10, 11, 12

¿Alguien sabe lo que está pasando con aquellos que no tienen sentido?

¿Alguien sabe por qué muchos de los valores tienen 10 píxeles de diferencia con los píxeles físicos, pero ese resultado es como si coinciden? (por ejemplo, 1.7 y 2.6)

¿Estoy haciendo algo mal, o parece que es imposible alejar más allá de 1.0 a menos que el usuario también pueda escalar y se establezca el valor de escala mínima?

Es decir, aunque los valores válidos son de 0,01 a 10, los valores de escala inicial por debajo de 1,0 se ignoran a menos que también se pueda establecer la escala mínima.

Los documentos de Android sí dicen cuando escalable por el usuario no es que los valores mínimos / máximos de la escala son ignorados. Eso no parece muy útil. Y 2.9-2.11 parece mostrar que no puede simplemente calcularlo usted mismo y establecer el ancho.

Finalmente, el HTML que estoy usando:

<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
<meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script>
$("#bl1").click(function(){
var pageWidth = $(document).width();
var pageHeight = $(document).height();
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script>
</body>
</html>

Entonces ... ¿qué me estoy perdiendo?

Answer 1

Interesante lata de gusanos que has abierto allí. A medida que pruebes más dispositivos, probablemente verás aún más rarezas y errores al azar. ¡Tiempos interesantes! :-)

Sospecho que, en algún momento, tal vez quieras renunciar, y solo intentar ...

• Quédese con la configuración más simple posible.
• Acepte el ancho de píxeles que el dispositivo elija para informar.
• Confíe en el diseño adaptable / fluido y en los anchos relativos para hacer que las cosas funcionen en diferentes anchos de pantalla.
• Use propiedades CSS nativas para una representación neutra de resolución de esquinas redondeadas, sombras y degradados.
• Use formatos vectoriales (svg, icon-fonts, etc.) tanto como sea posible
• y ( importante ) Utilice las border-image alta resolución, así como background-image junto con la propiedad de background-size ^1, que cuenta con un buen soporte, para que las background-image vean nítidas y nítidas ² .

¹⁾ Para proporcionar compatibilidad con versiones anteriores a navegadores antiguos (como MSIE8) necesitarás usar declaraciones dobles background-image , como:

background-image: url(low-res.png); /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size: 100px 10px; /* CSS3 */

²⁾ La consulta de medios -webkit-max-device-pixel-ratio también puede ayudar, pero como su nombre lo indica, solo funciona para navegadores webkit.

Divagar:

Los dispositivos Android e iOS de nueva generación tienen tales DPI de pantalla diferentes que han recurrido al informe de píxeles CSS en lugar de píxeles de dispositivos reales. Esto es bueno o malo, dependiendo de cómo lo mires.

Es malo porque ya no tienes garantizado el control de píxel de dispositivo que solías tener, trabajando con las pantallas más homogéneas de antaño.

Por otro lado, es bueno porque sabes que tus diseños nunca serán tan pequeños que no puedan ser leídos / usados ​​por humanos comunes.

El problema con el uso de target-densitydpi=device-dpi es que mientras funciona de maravillas en una pantalla de 800px de 7 pulgadas de ancho, arruinará por completo su aplicación en una pantalla de 4 pulgadas de ancho 960px.

Answer 2

$(document).ready(function() {
$(''meta[name=viewport]'').attr(''content'',''width=1024, user-scalable=no'');
});

Parece que funciona para deshabilitar la escala del usuario después de aplicar la escala correcta