Skip to main content

Viewport

¿Qué significa Viewport?

El término “viewport” describe el tamaño de la pantalla disponible de un dispositivo móvil. Estos pueden ser, por ejemplo, teléfonos inteligentes, tabletas, ordenadores portátiles o de escritorio. Sin embargo, Viewport tiene un significado más específico como metaetiqueta en HTML5, donde se utiliza principalmente en el contexto de la optimización de los móviles. Asegura que el tamaño de la pantalla disponible se utilice de manera óptima y que el contenido se muestre completamente y en el tamaño correcto.

¿Cómo funciona el puerto de visión?

Hay dos maneras de especificar explícitamente la vista en un archivo HTML, a saber

1. directamente en el documento HTML: El siguiente código se inserta en el área de la cabeza del documento HTML:

[meta name=”view port” content=”width=ancho del dispositivo, escala inicial=1″]

Esta instrucción ajusta toda la página web al ancho de la pantalla disponible del dispositivo terminal.

2. Externamente en un archivo CSS referenciado: El siguiente código CSS se inserta directamente al principio del archivo CSS referenciado:

@viewport {
ancho: ancho del dispositivo;
}

Esta línea de código especifica el ancho del archivo HTML para que se adapte automáticamente al ancho de la pantalla del dispositivo terminal.

Importancia para el marketing móvil

La especificación del puerto de visualización es esencial para todos los sitios web modernos. Apple y Google recomiendan usar el elemento meta para todas las presencias en la web que deberían responder. Quienes desean ofrecer a sus visitantes una experiencia de usuario óptima utilizan el elemento para optimizar la presentación de la presencia en la web para diferentes dispositivos finales y tamaños de pantalla.

Más información sobre este tema puede encontrarse aquí:

https://www.quirksmode.org/mobile/viewports
https://www.quirksmode.org/mobile/viewports2
https://developer.apple.com/library/archive/documentation/UsingtheViewport
https://developers.google.com/web/fundamentals/viewport
http://webkrauts.de/ein-blick-durch-den-viewport


¿Tiene más preguntas?

Por favor, contáctenos


Otros contenidos