css - name - ¿Es realmente necesaria la metaetiqueta de la ventana gráfica?
meta viewport bootstrap (7)
En los sistemas operativos de escritorio, las vistas de los navegadores tienen un número fijo de píxeles de ancho, y el contenido de la página web se representa en ellas tal como están.
Comenzando con Safari en iOS (o como se suponía que íbamos a llamar a iOS en aquel entonces), las ventanas gráficas del navegador móvil han sido "virtuales". Aunque la ventana gráfica solo puede ocupar (por ejemplo) 320 píxeles físicos, vale la pena el espacio en la interfaz, el navegador crea una ventana gráfica "virtual" que es más grande (980 píxeles de ancho por defecto en iOS, creo) y reproduce el contenido allí, luego amplía esa vista virtual hasta que encaje en los píxeles físicos reales disponibles en la pantalla del dispositivo.
La metaetiqueta de la ventana gráfica le permite indicar al navegador del dispositivo móvil qué tamaño debe tener esta ventana gráfica virtual. Esto a menudo es útil si no está cambiando realmente el diseño de su sitio para dispositivos móviles, y rinde mejor con una ventana gráfica virtual más grande o más pequeña. (Creo que se eligió 980 píxeles como el valor predeterminado porque hizo un buen trabajo al generar muchos sitios de alto perfil en 2007; para cualquier sitio dado, un valor diferente podría ser mejor).
Personalmente, siempre uso <meta name="viewport" content="width=device-width, initial-scale=1"> para que la ventana virtual coincida con las dimensiones del dispositivo. (Tenga en cuenta que initial-scale=1 parece ser necesario para hacer que la ventana gráfica virtual se adapte al modo horizontal en iOS .) Eso hace que los navegadores móviles se comporten como siempre lo hacen los navegadores de escritorio, que es a lo que estoy acostumbrado.
Sin una metaetiqueta de ventana gráfica, su sitio se representará en la ventana virtual predeterminada del dispositivo. No creo que sea necesariamente un problema, especialmente si todas sus unidades son ems o porcentajes como usted dice. Pero podría ser un poco confuso si necesita pensar en píxeles en cualquier punto, especialmente dado que los diferentes navegadores podrían tener ventanas gráficas predeterminadas de tamaño diferente. También puede ser confuso para los mantenedores posteriores si no entienden el enfoque.
Me imagino que estableces el tamaño de letra de base bastante grande para que sea legible. ¿Podría vincular a uno de los sitios web que ha creado de esta manera, para que podamos ver un ejemplo?
He creado algunos sitios receptivos, pero soy bastante nuevo en el desarrollo de sitios receptivos. En mi CSS, el 99% de mis valores están en ems o porcentajes. Estoy usando consultas de medios (ancho máximo y ancho máximo del dispositivo) para hacer cambios en el diseño. No he incluido una metaetiqueta de vista y funciona perfectamente en iOS, varios teléfonos y tabletas con Android en los que probé y todos los navegadores de escritorio.
Agregar una metaetiqueta rompe mi sitio. ¿Estoy haciendo algo mal o estoy haciendo algo bien para no tener que incluirlo? Estoy confundido sobre por qué parece ser una mejor práctica, ya que está rompiendo mis cosas.
¿Me estoy perdiendo de algo?
No para todos los dispositivos, pero sí para Móviles. Los navegadores móviles renderizan páginas en una "ventana" virtual, la ventana gráfica que suele ser más ancha que la pantalla, por lo que no es necesario comprimir todos los diseños de página en una ventana pequeña (por lo que rompe algunos sitios no optimizados para dispositivos móviles y los usuarios tienen que enfocar). Mobile Safari presentó la "metaetiqueta de la ventana gráfica" para permitir que los desarrolladores web controlen el tamaño y la escala de la ventana gráfica. Ahora todos los navegadores móviles admiten esta etiqueta a pesar de que no forma parte de ningún estándar web . Un sitio típico optimizado para dispositivos móviles debe contener la siguiente etiqueta:
<meta name="viewport" content="width=device-width, initial-scale=1">
La propiedad de ancho controla el tamaño de la ventana gráfica. Ancho de la pantalla en píxeles CSS a una escala del 100%. La propiedad de escala inicial controla el nivel de zoom cuando se carga la página por primera vez. Las propiedades de escala máxima, escala mínima y escalabilidad del usuario controlan cómo los usuarios pueden acercar o alejar la página.
Sí, es una etiqueta necesaria para desarrollar sitios receptivos. Sin embargo, el uso de la etiqueta por sí solo no lo ayudará a hacerlo, pero definitivamente hace que sea más fácil desarrollar sitios receptivos al permitirle controlar el tamaño del contenido visible de su página web. .
Sin la ventana gráfica, su dispositivo usa una ventana gráfica virtual que de manera predeterminada es una versión alejada de su sitio web, esto es alrededor de 980 px en iPhone y 800px en andriod. Tan pronto como configure la ventana gráfica y deshabilite este alejamiento, el dispositivo tratará el sitio web como corresponde y medirá alrededor de 480 px de ancho o 320 px dependiendo del dispositivo y la orientación, etc.
Completo recurso aquí a continuación, mi consejo es que siempre que trabaje con responsive y móvil, siempre configure primero la ventana gráfica. Es la mejor manera de normalizar el zoom del dispositivo y garantizar que su sitio se muestre utilizando un ancho real del dispositivo en lugar de cualquier ancho virtual.
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
Todavía puede usar la metaetiqueta de la vista para optimizar la resolución a la vista del dispositivo y poder usar Zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">
Con una escala máxima definida, puede tener control sobre cómo el usuario lo acerca. Creo que deberíamos habilitar esta opción porque, incluso con un sitio web receptivo, deseo hacer zoom, ya se sabe que es tan intuitivo que se convierte en una expectativa.
Definitivamente debe usar etiquetas de ventana gráfica , ya que tienen la capacidad de hacer que la vida de los desarrolladores web sea infinitamente más simple. Le permiten controlar fácilmente las dimensiones exactas de renderizado y / o los niveles de zoom de CUALQUIER pantalla (incluso en el desktop si lo desea). Eso hace que construir un sitio web para cualquier dispositivo sea un pedazo de pastel. Pero sepa que con gran poder viene una gran responsabilidad. Utilice este poder sabiamente (y no DESACTIVE el zoom).
Entonces para responder mi propia pregunta. No es necesario.
Puede usar consultas de medios de ancho mínimo y máximo para aplicar estilo a la versión de escritorio en puntos de corte específicos.
A continuación, actualiza principalmente el tamaño de fuente y otras propiedades específicamente para tabletas y teléfonos. Como dije, esto es principalmente aumentar el tamaño de letra para facilitar la lectura.
Sin embargo, este método tiene un importante problema de mantenimiento.
La metaetiqueta de la ventana gráfica le permite usar simplemente max y min-width que abarcan desde el escritorio hasta los dispositivos móviles.