Todo lo que querías saber sobre la metaetiqueta de la ventana gráfica. Usar la metaetiqueta de ventana gráfica en plantillas que no responden Escalar la página en todos los dispositivos

Con la llegada de los teléfonos inteligentes y los navegadores móviles, fue necesario adaptar de alguna manera los sitios web a los dispositivos móviles, y rápidamente. Por lo tanto, los desarrolladores de navegadores idearon e implementaron la metaetiqueta Viewport.

El texto en el diseño no adaptado del sitio es demasiado pequeño y muy difícil de leer y percibir; es necesario "acariciar" constantemente la pantalla, ampliar el texto del sitio y también moverse hacia la derecha al leer. Esto es muy inconveniente. La metaetiqueta Viewport resuelve este problema.

Corregir la ortografía de la metaetiqueta Viewport

Por lo tanto, le decimos al navegador que el área de visualización del contenido del sitio (contenido) debe ser igual al ancho de la pantalla de un teléfono inteligente u otro dispositivo móvil. Y también que no hace falta escalar el contenido.

Aquí hay una captura de pantalla de la pantalla de un dispositivo móvil sin la metaetiqueta Viewport, o más bien está comentada:

Y aquí está el mismo sitio, solo usando la metaetiqueta Viewport:

Si estás leyendo esto desde un dispositivo móvil - .

Parámetros y valores disponibles de la metaetiqueta Viewport

ancho

Valores disponibles desde 200px hasta 10000px. O puede usar el ancho del dispositivo. De forma predeterminada, si no se especifica el ancho, tiene los siguientes parámetros: Safari móvil - 980 px, Opera - 850 px, Android WebKit - 800 px, Internet Explorer - 974 px.

altura

Valores disponibles desde 223px hasta 10000px. O puedes usar la altura del dispositivo. Por lo general, este parámetro no se especifica en absoluto al escribir código.

escala inicial

Los valores disponibles son de 0,1 a 10. Esta es la escala de página. Un valor de 1,0 o solo 1 significa que no hay escala. Cuanto mayor sea el valor de la escala inicial, mayor será la escala.

escalable por el usuario

Los valores disponibles son no o sí. El parámetro determina si el visitante puede cambiar la escala de la página. De forma predeterminada, el parámetro escalable por el usuario está establecido en sí.

escala mínima y escala máxima

Los valores disponibles son de 0,1 a 10. El parámetro determina la escala mínima y máxima que un visitante de la página puede cambiar por sí mismo. Un valor de 1,0 o solo 1 significa que no hay escala. Los valores predeterminados en el navegador móvil Safari son escala mínima="0,25" y escala máxima="1,6".

Esta útil metaetiqueta de Veiwport hará que su sitio sea más atractivo cuando se vea en dispositivos móviles.

¡Buena suerte y buena suerte a todos!

La metaetiqueta de la ventana gráfica es responsable del área de visualización del sitio en la pantalla. En pocas palabras, se trata de configurar el ancho de la pantalla del sitio. Por ejemplo, un sitio web se verá correctamente en el monitor de una PC, pero en un teléfono inteligente será difícil de leer, porque la fuente es demasiado pequeña.

Para resolver el problema de mostrar el sitio en resoluciones de navegador pequeñas, se inventó una nueva dirección: el diseño del sitio adaptable, con el objetivo de hacer que el sitio sea conveniente para usuarios con diferentes anchos de navegador.

La metaetiqueta de la ventana gráfica le permite ajustar el ancho de la ventana gráfica y la escala de la página. Por definición, una ventana gráfica es el área del sitio visible para el usuario sin necesidad de desplazarse.

sintaxis de la ventana gráfica

... ...

Arriba, solo se especificaron dos atributos: ancho y escala inicial, que son responsables del ancho y la escala, respectivamente. También puede especificar otros parámetros separados por comas. Consideremos todos los atributos posibles.

• ancho: establece el ancho de la ventana gráfica del navegador. Acepta un valor entero (de 200 a 10000) en píxeles o ancho del dispositivo. Este atributo es obligatorio para diseños de sitios web adaptables.
• altura: establece la altura de la ventana gráfica del navegador. Acepta un valor entero en píxeles (de 200 a 10000) o un valor de altura del dispositivo. Dado que el factor determinante es el ancho, no es necesario especificar la altura para el diseño adaptable.
• escala inicial - factor de escala. Acepta valores reales (de 0,1 a 10,0). El valor predeterminado es "1,0", lo que significa que cada píxel físico corresponde a un píxel de hardware.
• escalable por el usuario: establece si el usuario puede escalar la página. Acepta dos valores: no/sí
• escala mínima: establece la escala mínima. Medido en números reales.
• escala máxima: establece la escala mínima. Medido en números reales.

Ejemplos de ventanas gráficas

¿Cómo se relacionan los píxeles físicos y de hardware?

Los nuevos teléfonos inteligentes tienen alta resolución. En este sentido, es necesario aclarar el atributo de escala inicial, que es responsable del escalado. El caso es que haciendo la escala 1.0 conseguiremos un texto demasiado pequeño que será imposible de leer. Por lo tanto, la siguiente tabla se aplica al convertir la escala para dispositivos con alta densidad de píxeles.

Hola a todos y hoy hablaremos de ¿Qué es la ventana gráfica? y cómo usarlo.

Para entender qué es, necesitas algún tipo de dispositivo móvil. Ahora creemos un simple HTML página con el siguiente contenido:

puesto de prueba

esta es una publicación de prueba

otra publicación

esto es muy bueno

Nueva publicación

Ahora abramos nuestra página en un dispositivo móvil y ¿qué veremos? Y veremos que el texto es demasiado pequeño y difícil de leer. Sin embargo, si agregamos la siguiente etiqueta de contenido a la etiqueta cabeza

Ahora el texto parece normal. Aquí está el dibujo. A la izquierda sin etiqueta y a la derecha con ella.

¿Por qué sucede esto? El hecho es que el navegador por defecto piensa que el sitio está creado para la versión de escritorio del navegador e intenta encajarlo completamente en la ventana de su teléfono inteligente. Al configurar la etiqueta, le indicamos al navegador del teléfono que el ancho de visualización es igual al ancho del teléfono inteligente. Esta es una etiqueta muy simple, pero ayuda mucho al crear una versión móvil del sitio.

También puedes configurar la escala. Para este fin se utiliza escala inicial

Si quieres evitar que el usuario cambie el zoom de la página en su smartphone, puedes escribir lo siguiente:

Pero hay que tener cuidado porque... Sucede que el texto es bastante difícil de leer y hay que ampliarlo, pero si esto está prohibido, causará molestias al usuario.

Soporte del navegador

Android es compatible, pero hasta la versión 2.2 . la escala inicial es 1.0

Symbian, Nokia serie 40, Motorola, Opera mobile/mini y NetFront No apoyo

IE admite con 6 versiones

BlackBerry admite desde la versión 4.2.1

Como puedes ver, el soporte aún no está completo, pero ya puedes usar esta etiqueta porque... la mayoría de los teléfonos inteligentes nuevos ya lo entienden.

Con esto concluye este artículo, gracias por su atención.

Los navegadores móviles muestran páginas en una “ventana” virtual (ventana gráfica), que suele ser más ancha que la pantalla del dispositivo. Por lo tanto, no tienen que comprimir el diseño de cada página en una ventana pequeña (lo que puede dañar muchos sitios que no están optimizados para dispositivos móviles). Los usuarios pueden cambiar y ampliar el área visible para ver diferentes partes de la página.

La versión móvil de Safari introdujo la "metaetiqueta de ventana gráfica", que permite a los desarrolladores web controlar el tamaño de la ventana gráfica y la escala de la página. Muchos otros navegadores móviles también admiten esta etiqueta, aunque no forma parte de ningún estándar web. La documentación de Apple describe bien cómo los desarrolladores web pueden utilizar esta etiqueta. Pero tuvimos que investigar un poco para descubrir exactamente cómo podría implementarse en Fennec. Por ejemplo, la documentación de Safari dice que el contenido es una "lista de valores separados por comas", pero los navegadores y páginas web existentes utilizan cualquier combinación de comas, punto y coma y espacios como delimitadores.

Puede obtener 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 web típico optimizado para dispositivos móviles contiene la siguiente metaetiqueta:

La propiedad de ancho determina el tamaño de la ventana gráfica. Se puede configurar en un número específico de píxeles, digamos ancho=600, o en un valor especial de ancho del dispositivo, que es el ancho de la pantalla en píxeles CSS a una escala del 100%. (También hay 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 determinan cómo se permite a los usuarios aumentar o reducir la página.

Un píxel no es un píxel

En los últimos años, la resolución de la pantalla ha aumentado hasta tal punto que el ojo humano tiene dificultades para distinguir los píxeles individuales. Por ejemplo, los últimos smartphones suelen tener pantallas de 5 pulgadas con resoluciones superiores a 1920-1080 píxeles (~400 ppp). Debido a esto, muchos navegadores pueden representar sus páginas en un tamaño físico más pequeño traduciendo unos pocos píxeles de hardware por cada píxel CSS. Inicialmente, esto causó problemas de usabilidad y legibilidad en muchos sitios web optimizados para pantallas táctiles. Peter-Paul Koch escribió sobre este problema en Un píxel no es un píxel.

En resoluciones de pantalla altas, los navegadores escalarán eficazmente las páginas con escala inicial = 1. Su texto será fluido y nítido, pero sus imágenes de mapa de bits probablemente no utilizarán la resolución de pantalla completa. Para obtener imágenes más nítidas en estas pantallas, los desarrolladores web pueden crear imágenes (o diseños completos) a una escala mayor que su tamaño final y luego escalarlas usando CSS o propiedades de ventana gráfica. Esto cumple con la especificación CSS 2.1, que establece:

Si la densidad de píxeles del dispositivo de salida es muy diferente de la densidad de imagen de una pantalla de computadora típica, el agente de usuario debe escalar los valores de píxeles. Se recomienda que un bloque de píxeles haga referencia a la cantidad total de píxeles del dispositivo que mejor se aproxima 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 a una distancia de un brazo del lector.

Para los desarrolladores web, esto significa que el tamaño de la página es mucho menor que la cantidad real de píxeles y los navegadores pueden cambiar 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 con grandes cambios en el tamaño y la orientación de la 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 una densidad de 200 a 300 ppp, la relación es de 1,5. Para pantallas con densidades superiores a 300 ppp, la proporción representa todo el piso ( densidad/ 150 ppp). Tenga en cuenta que la proporción predeterminada es verdadera solo cuando el zoom de la ventana gráfica es 1. De lo contrario, la proporció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 más grande. Para corregir esto, los navegadores, si es necesario, aumentarán el ancho de la ventana gráfica para llenar la pantalla en una escala determinada. Esto es especialmente útil para dispositivos de pantalla grande como el iPad. (Allen Pike Selecting Viewport for iPad Sites ofrece una buena explicación para los desarrolladores web).

Para las páginas que especifican una escala inicial o máxima, esto significa que la propiedad de ancho en realidad se traduce en mínimo ancho de la ventana gráfica. Por ejemplo, si su diseño debe tener 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 ampliarla) para que se ajuste a la pantalla:

Otros disponibles son escala mínima, escala máxima y escalable por el usuario. Estas propiedades afectan la escala y el ancho iniciales y también limitan 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 amplía una página cuando cambia de orientación vertical a horizontal, en lugar de diseñar la página como si estuviera originalmente cargada en "paisaje". Si los desarrolladores web quieren que su configuración de escala permanezca igual al cambiar la orientación en el iPhone, deben agregar un valor de escala máxima para evitar esta escala, que a veces tiene el efecto secundario no deseado de impedir que los usuarios cambien la escala:

Ventanas gráficas comunes para dispositivos móviles y tabletas

Si desea saber qué dispositivos móviles y tabletas tienen anchos de ventana gráfica, aquí tiene una lista completa de tamaños de ventana gráfica para dispositivos móviles y tabletas. 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

Especificación	Estado

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!