javascript - tag - viewport html bootstrap
Visual viewport vs Layout viewport en dispositivos móviles (1)
Acabo de leer un buen artículo en la vista que me dejó con un par de preguntas relacionadas con la vista visual frente a la vista de diseño en dispositivos móviles.
el ancho y la altura de la ventana gráfica de diseño son iguales a lo que se puede mostrar en la pantalla en el modo de alejamiento máximo
No entendí muy bien lo que eso significa. Cuando dicen "modo de alejamiento máximo", ¿significa que la ventana gráfica de diseño es diferente para diferentes HTML (y no específica para diferentes dispositivos como iPad, Xoom, etc.)?
En segundo lugar, he creado una página de demostración para medir estas dos vistas. (Por favor, vea esto en un iPhone / iPad para obtener los valores correctos).
Entiendo que la vista de diseño se puede cambiar configurando la etiqueta meta vista, pero eso también cambia la vista visual, ¿por qué? Dice que la vista visual es la parte de la página que se muestra actualmente en la pantalla, por lo que entendí que la vista no debe verse afectada por la configuración de la vista meta.
Tanto la ventana gráfica de presentación como la ventana visual se miden en píxeles CSS. Esta es una distinción importante para hacer. A diferencia de los píxeles físicos en el dispositivo, los píxeles CSS se usan para mantener las dimensiones del contenido relativamente constantes y controladas, y el dispositivo luego traduce los píxeles CSS en píxeles del dispositivo.
Comprender la diferencia entre los píxeles CSS y los píxeles del dispositivo puede ayudarlo a comprender y responder sus preguntas.
Las dimensiones de la ventana gráfica de diseño son efectivamente las dimensiones iniciales del contenido (en píxeles CSS).
La ventana gráfica de diseño se utiliza para determinar mejor cómo colocar y representar el contenido inicialmente. Es independiente del nivel de zoom del dispositivo. Al decir "... todo lo que se puede mostrar en la pantalla en el modo de alejamiento máximo", creo que alude al hecho de que las dimensiones de la ventana gráfica de diseño son invariables; siempre será del mismo tamaño, independientemente de la ventana visual actual.
La ventana visual es solo el área visible de la página, nuevamente, en píxeles CSS. Si amplía una página, aumenta el tamaño de los píxeles CSS, lo que naturalmente reduce la cantidad de píxeles CSS que pueden caber en el dispositivo. Es por eso que las dimensiones de la ventana visual se reducen cuando hace zoom.
La vista visual no puede ser más grande que el contenido de la página.
Las dimensiones del contenido son dictadas en gran medida por la vista de diseño.
Las dimensiones de la ventana gráfica de diseño se establecen mediante la regla de meta-ventana gráfica.
Por lo tanto, las dimensiones de la ventana visual deben cambiar en respuesta a los cambios en la regla de meta-ventana gráfica.
Desde entonces has preguntado (en comentarios):
¿Por qué es que cuando hay contenido que es explícitamente más amplio que la ventana gráfica de diseño, la ventana visual se está extendiendo para adaptarse a todo eso? ¿No debería haber una barra de desplazamiento?
No, porque solo le está indicando al navegador cuáles deben ser las dimensiones iniciales de la ventana gráfica de diseño, no la ventana visual.
Si desea que las dimensiones de la ventana visual no se ajusten al ancho completo del contenido en la carga de la página, establezca la propiedad initial-scale=1 dentro de la declaración de meta-viewport.
Hay una fantástica lectura en el Mozilla Dev Center sobre la metaetiqueta de la ventana gráfica: https://developer.mozilla.org/en/mobile/viewport_meta_tag