Configurar ventana gráfica

Esta regla se activa cuando PageSpeed Insights detecta que la página no especifica una ventana gráfica, o sí la especifica pero no se adapta a los diferentes dispositivos.

Información general

La ventana gráfica controla cómo se muestra una página web en un dispositivo móvil. Sin una ventana gráfica, los dispositivos móviles mostrarán la página tal como se mostraría en un ordenador; con el mismo ancho de pantalla, pero con las proporciones ajustadas a la pantalla del dispositivo. La configuración de una ventana gráfica permite controlar el ancho y las proporciones de la página en los diferentes dispositivos.

Izquierda: una página sin metaetiqueta de ventana gráfica.
Derecha: una página con una ventana gráfica que coincide con el ancho del dispositivo.

Recomendaciones

Las páginas optimizadas para dispositivos móviles deben incluir una metaetiqueta de ventana gráfica en la cabecera del documento con el siguiente formato: width=device-width, initial-scale=1.

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

Información adicional

Términos

  • Píxel de hardware: píxel físico en la pantalla. Por ejemplo, un iPhone 5 tiene una pantalla con 640 píxeles horizontales de hardware.
  • Píxel independiente del dispositivo (dip): escalado de los píxeles del dispositivo para que coincidan con un píxel de referencia uniforme a una distancia de visualización normal. El tamaño debería ser aproximadamente el mismo en todos los dispositivos. Un iPhone 5 tiene 320 dips de ancho.
  • Píxel CSS: unidad utilizada en el diseño de página que controla la ventana gráfica. Las dimensiones en píxeles incluidas en estilos como width: 100px se especifican en píxeles CSS. La proporción entre píxeles CSS y píxeles independientes del dispositivo constituye el factor de escalado de la página o el zoom.

Páginas para ordenadores en dispositivos móviles

Cuando no se especifica una ventana gráfica en una página, los navegadores para móviles mostrarán esa página con un ancho alternativo que irá desde los 800 hasta los 1024 píxeles CSS. El factor de escalado de página se ajusta de modo que la página quepa en la pantalla, lo que obliga a los usuarios a hacer zoom para interactuar con la página.

Metaetiqueta de ventana gráfica

Una metaetiqueta de ventana gráfica indica al navegador cómo ajustar las dimensiones y el escalado de la página. Esta debería incluirse en la cabecera del documento.

Ventana gráfica de ancho fijo

La ventana gráfica se puede ajustar a un ancho específico, como width=320 o width=1024. Aunque no se recomienda, sería útil para garantizar que las páginas con dimensiones fijas se muestren correctamente.

Ventana gráfica adaptable

El valor de la metaetiqueta width=device-width indica a la página que ajuste el ancho en píxeles independientes del dispositivo. Esto permite que el contenido de la página se adapte a los diferentes tamaños de pantalla.

Algunos navegadores, incluidos los de iOS y Windows Phone, mantendrán un ancho de página constante al girar la pantalla en modo apaisado, y harán zoom en lugar de volver a procesar la página para adaptarla a la pantalla. El atributo initial-scale=1 indica a los navegadores que establezcan una relación de aspecto de 1:1 entre los píxeles CSS y los píxeles independientes del dispositivo, independientemente de la orientación del dispositivo, y permite que la página aproveche todo el ancho en modo apaisado.

vs
Izquierda: un iPhone 5 con un ancho de rotación width=device-width, lo que resulta en un ancho de 320 px en modo apaisado.
Derecha: un iPhone 5 con un ancho de rotación width=device-width, initial-scale=1, lo que resulta en un ancho de 568 px en modo apaisado.

Las páginas deben diseñarse de modo que funcionen con diferentes anchos para usar una ventana gráfica adaptable. Consulta nuestras recomendaciones para adaptar el tamaño del contenido a la ventana gráfica si necesitas ayuda.

Otras consideraciones

Evita minimum-scale, maximum-scale, user-scalable

Es posible ajustar un zoom mínimo y máximo, o impedir que los usuarios puedan ampliar la ventana gráfica en su totalidad. Estas opciones afectan negativamente a la accesibilidad y, por lo general, se deberían evitar.

@viewport

Aunque su compatibilidad esté bastante extendida, la metaetiqueta de ventana gráfica no forma parte de un estándar. Este comportamiento se incluirá en los estilos CSS como parte de la especificación de adaptación de CSS a los dispositivos. Hasta que no esté terminada esta especificación y esté más extendida, los autores deberían seguir usando la metaetiqueta de ventana gráfica para garantizar la compatibilidad, incluso con sus estilos @viewport correspondientes.

Recursos (en inglés):