Título escalable de todas las publicaciones de usuarios anteriores. Las opiniones son como los huesos: cada uno tiene la suya.

Muy a menudo la gente no entiende la diferencia entre ancho (ancho) y ancho del dispositivo (y, además, hay ejemplos con ancho mínimo del dispositivo y ancho máximo del dispositivo), utilizando consultas de medios CSS. Este malentendido genera código incorrecto y mucho más trabajo para el desarrollador. Esta pregunta surge mucho en los foros de SitePoint, por lo que es hora de explicarla con más detalle. Este artículo abordará este problema y también analizará más de cerca qué opción debe utilizar al crear sitios web responsivos.

Definiciones básicas

Definamos a qué nos referimos cuando hablamos de consultas de medios basadas en "ancho" y "ancho del dispositivo". Las citas a continuación son del artículo de MDN sobre consultas de medios, y existe esta definición de "ancho":

La propiedad del medio "ancho" describe el ancho de la superficie de visualización del dispositivo de salida (por ejemplo, el ancho de una ventana de documento o el ancho de una ventana de página en una impresora).

Y así es como MDN define “ancho del dispositivo”:

Describe el ancho del dispositivo de salida (es decir, una pantalla o página completa, no solo un área de visualización como una ventana de documento)

Entonces, ¿qué significa esto realmente? En términos simples, "ancho" y "ancho del dispositivo" se refieren al ancho del dispositivo, no a todo el ancho de la ventana gráfica, lo que puede ser un concepto completamente diferente. Lo único que debería importarle es el ancho de la ventana gráfica, independientemente del ancho del dispositivo.

Dicho esto, la principal diferencia entre el ancho y el ancho del dispositivo es que el ancho del dispositivo no siempre coincide con el área de visualización de un dispositivo en particular.

La mayoría de las tabletas y dispositivos móviles no siempre tienen 1 píxel de dispositivo por 1 píxel de CSS. Por ejemplo, debes saber que el iPhone 4 tiene un área de visualización estándar de 640x960. Esto significa que en este ejemplo, el ancho del dispositivo del iPhone4 es 320x480. El punto es que Apple entiende que no todos los sitios están diseñados para ser responsivos y está tratando de complacer a todos proporcionando un ancho de aproximadamente 980 px para mostrar la versión de escritorio del sitio. Esto significa que si no hay una metaetiqueta de ventana gráfica, el iPhone4 tomará el sitio y lo representará como si tuviera 980 px de ancho, mientras lo comprime en una pantalla de 320 px de ancho, lo que hará que el sitio parezca más pequeño desde la perspectiva del usuario.

Empecemos

Para comenzar, como ocurre con todo lo relacionado con la capacidad de respuesta de los sitios y el uso de consultas de medios, la etiqueta del área de meta revisión debe colocarse en una sección de su sitio. La versión estándar básica se muestra a continuación.

Una vez que este fragmento aparece en nuestra página, si vemos la página en diferentes dispositivos, se activarán diferentes consultas de medios. Sin esto, al visualizar una página en un dispositivo específico, simplemente aparecerá como una versión más pequeña de la página; el dispositivo intentará comprimir todo el sitio en una pantalla de 320 píxeles de ancho. ¡Y esto no es bueno ni para ti ni para tus usuarios! A los usuarios no les gusta acercarse a un sitio para ver el contenido y definitivamente no quieren desplazarse hacia adelante y hacia atrás.

Por ejemplo, tomemos el iPhone 4, que tiene un ancho de ventana estándar de 980 px. Sin la metaetiqueta, sus intentos de utilizar consultas de medios fracasarán y el dispositivo no accederá correctamente a la ventana gráfica estándar. La mayoría de las consultas de medios están diseñadas para tener 500 px o menos. Esto generalmente se hace con una simple consulta de medios de ancho máximo. Sin la metaetiqueta, esta solicitud no tendrá ningún efecto, ya que el iPhone 4 seguirá mostrando la versión de 980 píxeles de ancho del sitio. Veamos el siguiente ejemplo:

Cuerpo (fondo: blanco;) @media pantalla y (ancho mínimo: 980 px) /* Escritorio */ (cuerpo (fondo: rojo;)) @media pantalla y (ancho máximo: 979 px) /* Tableta */ (cuerpo (fondo: azul;) ) @media screen y (ancho máximo: 500px) /* Móvil */ (cuerpo (fondo: verde;))

A continuación se adjuntan dos capturas de pantalla tomadas con un iPhone 4. Ambas páginas tienen el CSS anterior, pero una usa la etiqueta meta viewport y la otra no.

La página que se muestra arriba no contiene una metaetiqueta y, como resultado, el fondo aparece rojo e imita una ventana gráfica estándar de 980 píxeles de ancho, en lugar de utilizar una consulta de medios móviles de 500 píxeles.

En este caso, la metaetiqueta está en su lugar y iOS representa correctamente la página como la queremos: se basa en un ancho de 320 px y permite que nuestras consultas de medios funcionen como esperamos.

¿Por qué elegir el ancho del dispositivo?

Para ser honesto, el título de este artículo inicialmente implica no usar el ancho del dispositivo. Sin embargo, el ancho del dispositivo tiene su lugar. Si está creando un sitio para dispositivos específicos, entonces sí, debe usar el ancho del dispositivo.

Desde una perspectiva de CSS y RWD, un buen sitio es aquel que es verdaderamente "independiente del dispositivo" y no intenta adaptarse al ancho de cada dispositivo individual. Apuntar a puntos de interrupción específicos para diferentes "tipos" de dispositivos (como tabletas o teléfonos móviles) se logra centrándose en cómo se muestra el contenido en un ancho de ventana específico y luego realizando cambios en las consultas de medios en consecuencia. Por lo tanto, no es el dispositivo el que dicta los puntos de interrupción, sino el diseño y el contenido, y en última instancia esto puede conducir a resultados óptimos, tanto desde su punto de vista como desde el de los usuarios.

Esta puede ser la razón por la que tanta gente tiene problemas para crear un diseño responsivo y por la que se quejan de que es difícil. Pero si intentan diseñar para dispositivos individuales, están librando una batalla perdida: la cantidad de dispositivos que deben tenerse en cuenta (para cubrir todo) es demasiado grande y simplemente reduce todo a código incorrecto. También vale la pena mencionar que si decide utilizar el ancho del dispositivo, también debe especificar reglas separadas para la orientación (vertical u horizontal): el ancho del dispositivo no cambia solo porque giró el dispositivo de lado. Esto requiere aún más código, lo que significa aún más dolores de cabeza.

Sin embargo, veamos otra posible opción.

¿Qué pasa con el “ancho”?

Soy de la opinión, al igual que muchos desarrolladores experimentados, de que una página totalmente responsiva que se comporte como se espera en todos los tamaños de pantalla posibles es la forma más fácil y rentable de lograr el diseño más eficiente para todos los dispositivos.

Para crear una página totalmente responsiva y flexible, el desarrollador simplemente debe asegurarse de que se tengan en cuenta todas las ventanas gráficas y que la página cambie de estructura y tamaño según sea necesario para adaptarse al contenido y al diseño.

Todo lo que necesita para una página totalmente responsiva es un sitio responsivo y algunas consultas de medios inteligentes para apuntar a la gama estándar de dispositivos móviles, tabletas, computadoras de escritorio y ventanas gráficas. Prefiero utilizar las consultas de medios de Foundation, que son las más precisas y cubren todas las ventanas gráficas necesarias.

Por supuesto, como todo en desarrollo, el uso exclusivo de consultas basadas en ancho no es la solución a todos los problemas de diseño. Esto es bastante necesario para realizar pruebas en dispositivos móviles en busca de diversos errores y mostrar rarezas. Pero poder ver cómo se mostrará todo en diferentes dispositivos móviles es tan fácil como cambiar el tamaño de la ventana del navegador.

Para las pruebas, utilizo la extensión de Chrome Responsive Web Design Tester. Le permite seleccionar un dispositivo específico. Verá el tamaño del dispositivo y cómo se mostrará su página en ese dispositivo.

Otro pequeño beneficio que me gustaría mencionar es que el uso de consultas basadas en ancho garantizará que los dispositivos futuros muestren el sitio en su totalidad. Este es un enfoque bastante prometedor ya que su objetivo es algo más global (el tamaño general de la ventana gráfica) en lugar de un dispositivo específico.

En conclusión

¿Sigues pensando en utilizar el ancho del dispositivo en las consultas de medios? ¿Los argumentos presentados no fueron lo suficientemente convincentes? El uso del "ancho" normal y la ventana gráfica del dispositivo simplifica el diseño responsivo y, en última instancia, es la mejor opción que se debe utilizar casi siempre.

Es la zona de la ventana en la que se puede ver el contenido web. A menudo, este no tiene el mismo tamaño que la página representada, en cuyo caso el navegador proporciona barras de desplazamiento para que el usuario se desplace y acceda a todo el contenido.

Los dispositivos de pantalla estrecha (por ejemplo, móviles) renderizan páginas en una ventana virtual o ventana gráfica, que suele ser más ancha que la pantalla, y luego reducen el resultado renderizado para que se pueda ver todo a la vez. Luego, los usuarios pueden desplazarse y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si la pantalla de un móvil tiene un ancho de 640 px, las páginas se pueden representar con una ventana gráfica virtual de 980 px y luego se reducirán para que quepan en el espacio de 640 px.

Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se rompen (o al menos se ven mal) cuando se representan con un ancho de ventana pequeño. Esta ventana virtual es una forma de hacer que los sitios no optimizados para dispositivos móviles en general se vean mejor en dispositivos de pantalla estrecha.

Ingrese la metaetiqueta de la ventana gráfica

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

Para mitigar este problema, Apple introdujo la "metaetiqueta de ventana gráfica" en Safari iOS para permitir a los desarrolladores web controlar el tamaño y la escala de la ventana gráfica. Muchos otros navegadores móviles ahora admiten esta etiqueta, aunque no forma parte de ningún estándar web. Apple" La documentación de Google hace un buen trabajo al explicar cómo los desarrolladores web pueden usar esta etiqueta, pero tuvimos que hacer un trabajo de detective para descubrir exactamente cómo implementarla en Fennec. Por ejemplo, la documentación de Safari dice que el contenido es una "lista delimitada por comas", pero los navegadores y páginas web existentes utilizan cualquier combinación de comas, punto y coma y espacios como separadores.

Obtenga más información sobre las ventanas gráficas en diferentes navegadores móviles en A Tale of Two Viewports en quirksmode.org.

Conceptos básicos de la ventana gráfica

Un sitio típico optimizado para dispositivos móviles contiene algo como lo siguiente:

La propiedad de ancho controla el tamaño de la ventana gráfica. Se puede configurar en un número específico de píxeles como ancho = 600 o en el valor especial ancho del dispositivo, que es el ancho de la pantalla en píxeles CSS en una escala del 100%. (Existen valores correspondientes de altura y altura del dispositivo, que pueden ser útiles para páginas con elementos que cambian de tamaño o posición según la altura de la ventana gráfica).

La propiedad de escala inicial controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades de escala máxima, escala mínima y escalable por el usuario controlan cómo se permite a los usuarios acercar o alejar la página.

Un píxel no es un píxel

En los últimos años, las resoluciones de las pantallas han aumentado hasta tal punto que los píxeles individuales son difíciles de distinguir para el ojo humano. Por ejemplo, los teléfonos inteligentes recientes generalmente tienen pantallas de 5 pulgadas con resoluciones superiores a 1920-1080 píxeles (~400 ppp). Debido a esto, muchos navegadores pueden mostrar sus páginas en un tamaño físico más pequeño traduciendo múltiples píxeles de hardware para cada "píxel" CSS. Inicialmente, esto causó problemas de usabilidad y legibilidad en muchos sitios web táctiles. Peter-Paul Koch escribió sobre este problema en Un píxel no es un píxel.

En pantallas con alta resolución de ppp, los navegadores ampliarán efectivamente las páginas con escala inicial = 1. Su texto será fluido y nítido, pero sus imágenes de mapa de bits probablemente no aprovecharán la resolución de pantalla completa. Para obtener imágenes más nítidas en estas pantallas, es posible que los desarrolladores web quieran diseñar imágenes (o diseños completos) a una escala mayor que su tamaño final y luego reducirlas usando CSS o propiedades de ventana gráfica. Esto es consistente con la especificación CSS 2.1, que dice:

Si la densidad de píxeles del dispositivo de salida es muy diferente a la de una pantalla de computadora típica, el agente de usuario debe cambiar la escala de los valores de píxeles. Se recomienda que la unidad de píxeles se refiera al número total de píxeles del dispositivo que mejor se aproxime al píxel de referencia. Se recomienda que el píxel de referencia sea el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 96 ppp y una distancia desde el lector de un brazo de distancia.

Para los desarrolladores web, esto significa que el tamaño de una página es mucho menor que el número real de píxeles y los navegadores pueden dimensionar sus diseños e imágenes en consecuencia. Pero recuerda que no todos los dispositivos móviles tienen el mismo ancho; debe asegurarse de que sus páginas funcionen bien en una gran variedad de tamaños y orientaciones de pantalla.

La proporción de píxeles predeterminada depende de la densidad de la pantalla. En una pantalla con una densidad inferior a 200 ppp, la relación es 1,0. En pantallas con densidad entre 200 y 300 ppp, la relación es 1,5. Para pantallas con densidad superior a 300 ppp, la relación es el piso entero ( densidad/150 ppp). Tenga en cuenta que la relación predeterminada es verdadera solo cuando la escala de la ventana gráfica es igual a 1. De lo contrario, la relación entre los píxeles CSS y los píxeles del dispositivo depende del nivel de zoom actual.

Ancho de ventana gráfica y ancho de pantalla

Los sitios pueden configurar su ventana gráfica en un tamaño específico. Por ejemplo, la definición "ancho=320, escala inicial=1" se puede utilizar para ajustarse con precisión a la pantalla de un teléfono pequeño en modo vertical. Esto puede causar problemas cuando el navegador no muestra una página en un tamaño mayor. Para solucionar este problema, los navegadores expandirán el ancho de la ventana gráfica si es necesario para llenar la pantalla en la escala solicitada. Esto es especialmente útil en dispositivos de pantalla grande como el. iPad (El libro de Allen Pike sobre cómo elegir una ventana gráfica para sitios iPad tiene una buena explicación para los desarrolladores web).

Para las páginas que establecen una escala inicial o máxima, esto significa que la propiedad de ancho en realidad se traduce en una mínimo ancho de la ventana gráfica. Por ejemplo, si su diseño necesita al menos 500 píxeles de ancho, puede utilizar el siguiente marcado. Cuando la pantalla tiene más de 500 píxeles de ancho, el navegador expandirá la ventana gráfica (en lugar de acercarla) para ajustarla a la pantalla:

Otros que están disponibles son los de escala mínima, escala máxima y escalables por el usuario. Estas propiedades afectan la escala y el ancho iniciales, además de limitar los cambios en el nivel de zoom.

No todos los navegadores móviles manejan los cambios de orientación de la misma manera. Por ejemplo, Mobile Safari a menudo simplemente hace zoom en la página cuando cambia de vertical a horizontal, en lugar de diseñar la página como lo haría si se cargara originalmente en horizontal. Si los desarrolladores web quieren que sus configuraciones de escala permanezcan consistentes al cambiar de orientación en el iPhone, deben agregar un valor de escala máxima para evitar este acercamiento, que a veces tiene el efecto secundario no deseado de impedir que los usuarios hagan acercamientos:

Suprima el pequeño zoom aplicado por muchos teléfonos inteligentes estableciendo los valores de escala inicial y de escala mínima en 0,86. El resultado es que el desplazamiento horizontal se suprime en cualquier orientación y el usuario puede hacer zoom si lo desea.

Tamaños de ventana gráfica comunes para dispositivos móviles y tabletas

Si desea saber qué dispositivos móviles y tabletas tienen qué ancho de ventana gráfica, existe una lista completa de . Esto proporciona información como el ancho de la ventana gráfica en orientación vertical y horizontal, así como el tamaño físico de la pantalla, el sistema operativo y la densidad de píxeles del dispositivo.

Presupuesto

Es evidente que existe una demanda de la metaetiqueta de ventana gráfica, ya que es compatible con los navegadores móviles más populares y utilizada por miles de sitios web. Sería bueno tener un verdadero estándar para que las páginas web controlen las propiedades de la ventana gráfica. A medida que avanza el proceso de estandarización, en Mozilla trabajaremos para mantenernos actualizados con cualquier cambio.

Descripción completa de la metaetiqueta ventana gráfica y sus atributos. Ejemplos, notas y recomendaciones para adaptar un sitio a dispositivos móviles. Además de metaetiquetas adicionales y útiles: Portátil, Móvil optimizado Y compatible con la aplicación web móvil de Apple.

• Metaetiqueta de ventana gráfica
  • Atributos de metaetiquetas de ventana gráfica
• Metaetiquetas adicionales y útiles
  • Metaetiqueta HandheldFriendly
  • Metaetiqueta MóvilOptimizado
  • Metaetiqueta compatible con aplicación web móvil-apple-apple
• Conjunto recomendado de metaetiquetas

Metaetiqueta de ventana gráfica

metaetiqueta ventana gráfica le dice al navegador exactamente cómo manejar los tamaños de página y escalarlos. Esta etiqueta debe agregarse a la sección principal.

Nota: metaetiqueta puesto de visualización No es parte de una norma formal y es parte de la especificación. Adaptación del dispositivo CSS(http://goo.gl/FSTGbn). Pero hasta que esta especificación esté finalizada y ampliamente adoptada, se recomienda utilizar la metaetiqueta ventana gráfica por separado y en combinación con estilos @viewport para fines de compatibilidad.

Ejemplo:

Atributos de metaetiquetas de ventana gráfica

metaetiqueta ventana gráfica puede tener los siguientes atributos, separados por comas (,):

ancho- ancho del área de visualización.

El valor del atributo es un número entero no negativo de 200 a 10000 píxeles o constante ancho del dispositivo, que establece el ancho de la página para que se ajuste al tamaño de la pantalla.

Si no se especifica el valor, el valor predeterminado se establece en: en Safari móvil = 980 px, Opera = 850 px, Android WebKit = 800 px, IE = 974 px.

Nota: Para sitios con diseño responsivo, se recomienda utilizar: ancho=ancho-dispositivo.

altura- altura del área de visualización.

El valor del atributo es un número entero no negativo de 233 a 10000 píxeles o constante altura del dispositivo, que establece la altura de la página para que se ajuste al tamaño de la pantalla.

Nota: si se especifica el atributo ancho, especificar atributo altura No es necesario.

escala inicial- escala de página inicial.

0.1 a 1.0 . Significado 1.0 define la escala 1:1 , es decir. "no escalar"

Nota: en algunos sistemas operativos (iOS, Windows Phone, etc.) El ancho de la página, cuando se gira, permanece sin cambios. En lugar de redistribuir el contenido, se escala. Por ello se recomienda utilizar: escala inicial = 1,0.

escalable por el usuario- disponibilidad de escalado de página por parte del usuario.

El valor del atributo es booleano " Sí"(1) - se puede escalar o " No"(0) - no se puede escalar.

Nota: Se recomienda utilizar el valor " Sí", y porque está instalado por defecto, entonces escalable por el usuario Puede que no se especifique.

escala mínima- escala mínima del área de visualización.

El valor del atributo es un número con un punto de 0.1 a 1.0 . En el navegador móvil Safari, el valor predeterminado es 0,25. Significado 1.0 define la escala 1:1 , es decir. "no escalar"

escala máxima- escala máxima de ventana gráfica.

El valor del atributo es un número con un punto de 0.1 a 1.0 . El navegador móvil Safari tiene por defecto la versión 1.6. Significado 1.0 define la escala 1:1 , es decir. "no escalar"

Nota: evitar atributos escalable por el usuario, escala mínima Y escala máxima, porque tienen un impacto negativo en la accesibilidad del contenido.

Metaetiquetas adicionales y útiles

metaetiqueta Portátil determina si la página de un sitio está optimizada para dispositivos móviles en Palm y Blackberry, en un navegador como AvantGo. Ahora muchos otros navegadores móviles lo reconocen.

Ejemplo:

metaetiqueta Móvil optimizado(http://goo.gl/ZpLjZz) establece el ancho de la ventana gráfica en los navegadores móviles IE Mobile o Pocket IE. Es análogo al atributo ancho en la metaetiqueta ventana gráfica.

Ejemplo:

metaetiqueta compatible con la aplicación web móvil de Apple(http://goo.gl/VGDYQC) permite que la página funcione en modo de pantalla completa, relevante para dispositivos móviles Apple.

Ejemplo:

El conjunto de metaetiquetas que utilizo para sitios con diseño responsivo, adaptados a dispositivos móviles:

Cuando queremos personalizar la ventana del navegador en nuestro dispositivo, solemos utilizar la etiqueta HTML . Sin embargo, por extraño que parezca, la metaetiqueta no es "normativa", no está en el estándar oficial del W3C.

La metaetiqueta de ventana gráfica fue implementada por primera vez por Apple en el iPhone y luego por otros proveedores de navegadores. Hoy en día es muy utilizado debido a la popularidad de iOS, Android y otras plataformas para tabletas y teléfonos inteligentes.

Dado que la metaetiqueta de la ventana gráfica es exclusivamente para personalizar el diseño, se puede decir que es una etiqueta CSS. Es por eso que el W3C busca estandarizar un nuevo método de adaptación que mueva el control de ventanas de HTML a CSS.

Regla CSS @viewport

Con la nueva regla @viewport, tenemos el mismo control de ventana que con la metaetiqueta, excepto que este control se realiza completamente a través de CSS. Al igual que cuando se utiliza una metaetiqueta, se recomienda establecer el ancho de la ventana del navegador utilizando un ancho de dispositivo independiente del dispositivo:

@ventana (
ancho: ancho del dispositivo;
}

Hoy en día, los programadores utilizan @viewport para el "modo instantáneo" en IE10, una función de Windows 8 que le permite trabajar en modo de ventanas múltiples. Por extraño que parezca, IE10 ignora la metaetiqueta si el tamaño de la ventana es inferior a 400 píxeles, lo que hace imposible que los sitios que utilizan la metaetiqueta optimicen para ventanas tan pequeñas. Para solucionar este problema, los programadores deben usar el parámetro de ancho del dispositivo mencionado anteriormente o definir una regla @viewport en una consulta de medios.

Usando @viewport en consultas de medios

Podemos usar @viewport en consultas de medios. Por ejemplo, la siguiente consulta de medios se utiliza para ajustar el diseño de una ventana de menos de 400 píxeles de ancho (como el modo de ventanas múltiples en IE10) a 320 píxeles de ancho.

@media pantalla y (ancho máximo: 400px) (
@-ms-viewport (ancho: 320px;)
...
}

En este ejemplo, si el dispositivo está configurado en un rango de resolución de 640 a 1024 píxeles, la regla @viewport escala la ventana a 640 píxeles.

@media screen y (ancho mínimo: 640 px) y (ancho máximo: 1024 px) (
@viewport (ancho: 640 px;)
...
}

Nuevos identificadores @viewport

Aunque podemos controlar el zoom y la función de zoom, algunas propiedades de la ventana gráfica (o "controladores", como se les llama ahora) han cambiado.

zoom

El descriptor de zoom es el equivalente a la escala inicial en una metaetiqueta. Al igual que la escala mínima y la escala máxima, existen descriptores para zoom máximo y zoom mínimo:

@ventana (
ancho: ancho del dispositivo;
zoom: 2;
}

zoom de usuario

El descriptor de zoom del usuario es equivalente al parámetro escalable por el usuario.

@ventana (
ancho: ancho del dispositivo;
zoom de usuario: fijo;
}

Soporte del navegador

Actualmente, la regla CSS @viewport solo es compatible con Opera e IE10. Parece que Chrome y otros navegadores lo implementarán pronto, porque... Se espera que esta metaetiqueta se convierta pronto en el nuevo estándar web oficial.

Por ahora, necesitas agregar un prefijo de proveedor a la regla @viewport:

@-ms-ventana gráfica (
ancho: ancho del dispositivo;
}
@-o-ventana gráfica (
ancho: ancho del dispositivo;
}
@ventana (
ancho: ancho del dispositivo;
}

Por supuesto, todavía necesitamos incluir la metaetiqueta de la ventana gráfica en la página html porque... no irá a ninguna parte pronto. Pero no da tanto miedo mirar hacia el futuro: agregar la regla @viewport simplemente prepara nuestros sitios y aplicaciones para el cambio.

error general

Un error común es que los desarrolladores suelen utilizar la escala inicial = 1 para plantillas que no responden. Esta configuración da como resultado que el 100% de la página se represente sin escalar. Si el diseño no responde, entonces el usuario tiene que desplazarse mucho o configurar manualmente el zoom para ver la página completa. El peor de los casos es la combinación de escalable por el usuario = no o escala máxima = 1 con escala inicial = 1. Esto desactiva la capacidad de escalar en el sitio. Y sin escalar, no hay forma de ver la página completa. Si su plantilla no responde, ¡no desactive la escala ni restablezca la escala inicial!

No hay duda de que utiliza la metaetiqueta de ventana gráfica cuando trabaja con plantillas responsivas. ¿Pero sabías que la metaetiqueta de ventana gráfica también puede ser útil para plantillas que no responden? Si no tiene tiempo para convertir la plantilla de su proyecto en responsiva, debe leer este tutorial para usar la metaetiqueta de ventana gráfica para mejorar la apariencia de su diseño en dispositivos móviles.

Uso común de la metaetiqueta de ventana gráfica

Normalmente, la metaetiqueta de la ventana gráfica se utiliza para establecer el ancho y la escala inicial de la ventana gráfica en dispositivos móviles. He aquí un ejemplo.

Uso de la metaetiqueta de ventana gráfica en una plantilla que no responde

De forma predeterminada, el ancho de la ventana gráfica en el iPhone está configurado en 980 px. Pero es posible que su diseño no se ajuste bien a este rango. El valor puede ser demasiado grande o pequeño para la plantilla. A continuación se muestran dos ejemplos. que utilizan la metaetiqueta de ventana gráfica para mejorar la apariencia de una plantilla que no responde en dispositivos móviles.

Ejemplo

Vea el sitio web de Themify desde su dispositivo móvil.

La captura de pantalla de la izquierda muestra la apariencia del sitio sin utilizar la metaetiqueta de la ventana gráfica. Puede notar que la página toca ambos lados de la pantalla. Si agrega una metaetiqueta de ventana gráfica que especifica un ancho de 1024 px, habrá un espacio a izquierda y derecha.

Otro ejemplo

Si su diseño es demasiado estrecho, también se verá torpe. Digamos que el ancho del contenedor es de 700 px y no se adapta. En este caso, la apariencia será como la captura de pantalla de abajo a la izquierda: una franja blanca ancha a la izquierda.

El problema se puede resolver fácilmente estableciendo el ancho de la ventana gráfica en 720 px. El ancho del diseño no cambia, pero el dispositivo móvil lo escalará a 720px.

error general

Un error común es que los desarrolladores suelen utilizar la escala inicial = 1 para plantillas que no responden. Esta configuración da como resultado que el 100% de la página se represente sin escalar. Si el diseño no responde, entonces el usuario tiene que desplazarse mucho o configurar manualmente el zoom para ver la página completa. El peor de los casos es la combinación de user-scalable=no o Maximum-scale=1 con inicial-scale=1. Esto desactiva la capacidad de escalar en el sitio. Y sin escalar, no hay forma de ver la página completa. Si su plantilla no responde, ¡no desactive la escala ni restablezca la escala inicial!