Efectos secundarios de eliminar "ancho = ancho del dispositivo" de la metaetiqueta de la ventana gráfica cuando también se establece "inicial-escala = 1.0"

Si bien la <meta name="viewport">etiqueta no está estandarizada, "es respetada por la mayoría de los navegadores móviles debido al dominio de facto".

Una desventaja de que no es un verdadero estándar web es que la documentación detallada no está tan disponible como otros estándares. El Grupo de Trabajo CSS tiene una especificación para esto, así que eso es lo que estoy usando principalmente como un trabajo autorizado.

Mi pregunta principal es:

¿Cuál sería la diferencia percibida entre las siguientes declaraciones?

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

<meta name="viewport" content="initial-scale=1.0">

Alternativamente preguntado, ¿cuáles son las diferencias entre estas dos reglas at @viewport CSS:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Cómo llegué a esas @viewporttraducciones:

width=device-width a min-width: extend-to-zoom; max-width: 100vw;

El documento de nivel 1 del módulo de adaptación de dispositivo CSS establece:

Los widthy heightde ventana gráfica <META>propiedades se traducen en widthy heightdescriptores, estableciendo el min-width/ min-heightvalor a extend-to-zoomy el max-width/ max-heightvalor a la longitud de la ventana gráfica.

Además dan un ejemplo :

Este <META>elemento:

<meta name="viewport" content="width=500, height=600">

se traduce como:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

El widthdescriptor abreviado se describe como:

Este es un descriptor abreviado para configurar ambos min-widthy max-width. Un <viewport-length>valor establecerá ambos min-widthy max-widthese valor. Dos <viewport-length>valores se establecerán min-widthen el primero y max-widthen el segundo.

Por lo tanto, es lógico que width: extend-to-zoom 500px;sea ​​equivalente a min-width: extend-to-zoom; max-width: 500px;.

Eso solo deja la 100vwparte. En la sección 10.4 , explican:

device-widthy device-heighttraducir a 100vw y 100vh respectivamente

Entonces finalmente podemos ver cómo width=device-widthse traduce min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 a zoom: 1.0; width: extend-to-zoom;

Este es un ejemplo literal :

Este <META>elemento:

<meta name="viewport" content="initial-scale=1.0">

se traduce como:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

La otra pregunta que tengo aquí es, ¿ cuál es exactamente el extend-to-zoomvalor?

La documentación y el procedimiento de resolución son difíciles de entender. Si alguien me puede señalar algunos ejemplos adicionales sobre esto, sería muy apreciado.

Además de todo lo anterior, he creado un sitio rápido: https://romellem.github.io/temp-site/viewport/ , para probar algunas configuraciones de viewport.

A saber:

• content = "ancho = ancho del dispositivo, escala inicial = 1.0"
• contenido = "escala inicial = 1.0"

Esto puede ayudar con las pruebas.

Antes de profundizar en lo que está preguntando, repasemos un poco sobre por qué viewportexiste la metaetiqueta en primer lugar. Esto es lo que he reunido.

¿Por qué necesitamos la viewportetiqueta?

Una ventana gráfica es un área donde se puede ver el contenido web. Por lo general, la página representada (contenido web) es más grande que la ventana gráfica. Como resultado, generalmente usamos barras de desplazamiento para ver el contenido oculto (porque la ventana gráfica no puede mostrar todo). Citado del Módulo de Adaptación de Dispositivo CSS Nivel 1 :

La vista estrecha es un problema para los documentos diseñados para verse bien en los navegadores de escritorio. El resultado es que los proveedores de navegadores móviles usan un tamaño de bloque inicial fijo que es diferente del tamaño de la ventana gráfica y cercano al de una ventana típica de navegador de escritorio. Además de desplazarse o desplazarse, el zoom a menudo se usa para cambiar entre una vista general del documento y hacer zoom en áreas particulares del documento para leer e interactuar.

En dispositivos móviles (y otros dispositivos más pequeños), el bloque contenedor inicial suele ser más grande que la ventana gráfica. Por ejemplo, un dispositivo móvil que tiene un ancho de pantalla de 640pxpodría tener un bloque inicial que contiene 980px. En este caso, el bloque contenedor inicial se reduce para 640pxque pueda encajar en la pantalla del móvil. Este 640pxancho (ancho de pantalla) es lo que se llama initial-widthde la ventana gráfica que será pertinente para nuestra discusión.

Entonces ... ¿Por qué necesitamos esta viewportetiqueta? Bueno, hoy en día, tenemos consultas de medios que nos permiten diseñar para dispositivos móviles. Sin embargo, esta consulta de medios depende del ancho real de la ventana gráfica. En dispositivos móviles, el agente de usuario aplica automáticamente el estilo del tamaño de la ventana de visualización a uno fijo diferente (generalmente más grande que el tamaño de la ventana de visualización inicial). Entonces, si el ancho de la ventana gráfica de un dispositivo móvil es fijo, las reglas CSS que usamos en las consultas de medios no se ejecutarán simplemente porque el ancho de la ventana gráfica nunca cambia. Usando la viewportetiqueta, podemos controlar el ancho real de la ventana gráfica (después de haber sido diseñado por el UA). Citado de MDN :

Sin embargo, este mecanismo no es tan bueno para las páginas que están optimizadas para pantallas estrechas que utilizan consultas de medios: si la ventana virtual es de 980px, por ejemplo, las consultas de medios que inician a 640px o 480px o menos nunca se usarán, lo que limita la efectividad de tales Técnicas de diseño receptivo.

Tenga en cuenta que la viewportetiqueta también puede cambiar la altura de la ventana gráfica real, no solo el ancho

viewport etiqueta width

El widthen una viewportetiqueta se traduce max-widthen la @viewportregla. Cuando declara el widthas device-width, se traduce 100%en la @viewportregla. El valor porcentual se resuelve en función initial-widthde la ventana gráfica. Entonces, si todavía estamos usando el ejemplo anterior, max-widthse resolverá a un valor de 640px. Como has descubierto, esto solo especifica el max-width. El min-widthserá automáticamente extend-to-zoom.

extend-to-zoom

Su pregunta fue ¿cuál es exactamente el valor de extender para hacer zoom ? Por lo que he reunido, es el valor que se usa para admitir que la ventana gráfica se extienda para adaptarse al área de visualización en un nivel de zoom dado. En otras palabras, es un valor de tamaño de ventana gráfica que cambia según el valor de zoom especificado. ¿Un ejemplo? Dado que el max-zoomvalor de la hoja de estilo UA es 5.0y initial-widthes 320px, <meta name="viewport" content="width=10">se resolverá a un ancho real inicial de 64px. Esto tiene sentido porque si un dispositivo solo tiene 320 px y solo se puede ampliar 5xel valor normal, entonces el tamaño mínimo de la ventana de visualización sería 320px divided by 5, lo que significa mostrar solo 64 px a la vez ( y no 10px¡porque eso requeriría un zoom de 32x!). El algoritmo utilizará este valor para determinar cómo extender (cambiar) los valores min-widthy max-width, que desempeñarán un papel en la determinación del ancho real de la ventana gráfica.

Poniendolo todo junto

Entonces, ¿cuál es la diferencia entre <meta name="viewport" content="width=device-width, initial-scale=1.0">y <meta name="viewport" content="initial-scale=1.0">? Simplemente rehaga los pasos del algoritmo ( esto y esto ). Hagamos lo último (el sin widthatributo) primero. (Asumiremos que el initial-widthde la ventana gráfica es 640px).

• widthno se establece, esto da como resultado max-widthy min-widthestar extend-to-zoomen la @viewportregla.
• initial-scalees 1.0. Esto significa que el zoomvalor también es1.0
• Vamos a resolverextend-to-zoom . Pasos:
  1. extend-zoom = MIN(zoom, max-zoom). La MINoperación resuelve el valor que no es auto. Aquí zoomestá 1.0y max-zoomestá auto. Esto significa que extend-zoomes1.0
  2. extend-width = initial-width / extend-zoom. Esto es facil; divide 640 entre 1. Obtienes extend-widthes igual a640
  3. Como extend-zoomno es auto, saltaremos al segundo condicional. max-widthes extend-to-zoom, de hecho , esto significa que max-widthse establecerá en extend-width. Así,max-width = 640
  4. min-widthes también extend-to-zoom, esto significa establecer min-widthen max-width. Obtenemosmin-width = 640
• Después de resolver losautoextend-to-zoom valores no (es decir, los ) para max-widthy min-width. Podemos proceder al siguiente procedimiento . Debido a que min-widtho max-widthno es auto, vamos a utilizar la primera ifen el procedimiento, estableciendo así el área de visualización efectiva inicial widtha MAX(min-width, MIN(max-width, initial-width)), lo que equivale a MAX(640, MIN(640, 640)). Esto se resuelve 640para su vista real inicialwidth
• Pasando al siguiente procedimiento . En este paso, widthno lo es auto. El valor no cambia y terminamos con la ventana gráfica real widthde640px

Hagamos lo primero.

• widthestá configurado, esto da como resultado max-widthser 100%( 640pxen nuestro caso) y min-widthestar extend-to-zoomen la @viewportregla.
• initial-scalees 1.0. Esto significa que el zoomvalor también es1.0
• Vamos a resolverextend-to-zoom . Si sigue los pasos cuidadosamente (casi lo mismo que arriba), terminará con un max-widthde 640pxy un min-widthde 640px.
• Probablemente puedas ver el patrón ahora. Obtendremos el ancho de la ventana gráfica real de 640px.

Entonces, ¿cuál es la diferencia percibida? Esencialmente ninguno . Ambos hacen lo mismo. Espero que mi explicación ayude ;-) Si algo estuvo mal, dímelo.