Viewport

La ventana gráfica (viewport) es el área visible de una página web o aplicación en la pantalla del usuario en un momento dado. En un ordenador de escritorio, la ventana gráfica corresponde a la ventana del navegador menos las barras de herramientas, barras de desplazamiento y el chrome del navegador. En tablets y smartphones, la ventana gráfica es el área completa de la pantalla que el navegador puede utilizar. La ventana gráfica determina cómo se escala, distribuye y presenta el contenido al lector. En HTML, la etiqueta `<meta name="viewport">` indica al navegador cómo controlar las dimensiones y la escala de la página, lo cual es la base del [diseño responsivo](/glossary/responsive-design).

El contenido que ignora las diferencias de ventana gráfica ofrece una experiencia de lectura deficiente en ciertos dispositivos. El texto puede ser ilegiblemente pequeño en teléfonos, los botones imposibles de pulsar, o puede requerirse desplazamiento horizontal para ver la página completa. Dado que los dispositivos móviles representan la mayoría del tráfico web, las publicaciones que no se adaptan a diferentes tamaños de ventana gráfica pierden lectores y parecen poco profesionales. Los motores de búsqueda también consideran la compatibilidad móvil en sus clasificaciones, por lo que la gestión adecuada de la ventana gráfica afecta tanto a la experiencia del usuario como a la visibilidad en los resultados de búsqueda.

Las publicaciones de FlipLink son completamente responsivas y se adaptan automáticamente a cualquier tamaño de ventana gráfica. El visor de [flipbook](/glossary/flipbook) detecta las dimensiones disponibles de la ventana gráfica y ajusta la representación de las páginas, la ubicación de los controles y los niveles de zoom en consecuencia. En ventanas gráficas de escritorio amplias, las publicaciones se muestran en [formato de doble página](/glossary/page-spread). En ventanas gráficas móviles estrechas, cambian a una vista de página única con navegación táctil. La configuración de [experiencia de página](/features/page-experience-and-layout) permite a los editores elegir entre diferentes modos de diseño, y FlipLink gestiona los cálculos de la ventana gráfica para mantener el contenido siempre legible y bien proporcionado. Cuando incrustas un flipbook usando el código de [incrustación responsiva](/features/sharing-and-distribution), este llena automáticamente su contenedor y responde a los cambios de ventana gráfica — incluyendo la rotación del dispositivo — sin ninguna configuración adicional.

La ventana gráfica se controla mediante la etiqueta meta HTML `<meta name="viewport" content="width=device-width, initial-scale=1">`. Esta etiqueta indica al navegador que establezca el ancho de la página igual al ancho de la pantalla del dispositivo y comience con zoom 1x. Sin ella, los navegadores móviles renderizan las páginas a un ancho virtual de aproximadamente 980 píxeles y luego reducen el resultado para ajustarlo, haciendo el texto diminuto y las interacciones difíciles. Las propiedades clave de la ventana gráfica incluyen: - **width**: Establece el ancho de la ventana gráfica. `device-width` coincide con el ancho real de la pantalla en píxeles CSS. - **initial-scale**: Controla el nivel de zoom cuando la página se carga por primera vez. Un valor de `1` significa sin zoom. - **maximum-scale** y **user-scalable**: Controlan si los usuarios pueden hacer zoom con gesto de pellizco. Las directrices de accesibilidad recomiendan permitir el zoom. - **viewport-fit**: En dispositivos con muescas o esquinas redondeadas, `viewport-fit=cover` extiende el contenido al área segura. Las media queries de CSS utilizan las dimensiones de la ventana gráfica para aplicar diferentes estilos. Por ejemplo, `@media (max-width: 768px)` se dirige a ventanas gráficas más estrechas que 768 píxeles CSS, que es un punto de ruptura común para la transición de tablet a móvil.

**"La ventana gráfica y la resolución de pantalla son lo mismo."** No lo son. Un teléfono puede tener una resolución de pantalla de 1170 x 2532 píxeles físicos pero una ventana gráfica de 390 x 844 píxeles CSS. La relación de píxeles del dispositivo (DPR) cubre la diferencia — en ese teléfono, el DPR es 3, lo que significa que cada píxel CSS corresponde a 9 píxeles físicos. Los diseñadores trabajan en píxeles CSS (la ventana gráfica), no en resolución física. **"Establecer `user-scalable=no` mejora la experiencia."** Impedir el zoom afecta la accesibilidad para usuarios con discapacidades visuales. Los estándares web modernos y muchas auditorías de accesibilidad marcan esto como un fallo. El visor de FlipLink permite el zoom por pellizco de forma predeterminada mientras mantiene la integridad del diseño. **"Los tamaños de ventana gráfica de escritorio son consistentes."** Las ventanas gráficas de escritorio varían ampliamente. Un usuario con un monitor de 27 pulgadas y las herramientas de desarrollo del navegador abiertas puede tener una ventana gráfica tan estrecha como 900 píxeles — bien dentro del territorio de las tablets. Las publicaciones responsivas deben adaptarse a las dimensiones reales de la ventana gráfica, no a categorías de dispositivos supuestas.

La ventana gráfica es la ventana a través de la cual los lectores ven tu contenido. Las publicaciones que responden al tamaño de la ventana gráfica ofrecen una experiencia coherente y profesional en cada dispositivo — desde un teléfono de 4 pulgadas hasta un monitor de escritorio de 32 pulgadas — sin que el lector note nunca la adaptación que está ocurriendo.