EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Configuración metaetiqueta viewport, web responsive

            metaetiqueta viewport

            metaetiqueta viewport

            La declaración viewport nos permite definir los parámetros de visualización de un página web en los diferentes dispositivos. Consiste en una metaetiqueta mediante la que se establece si se puede hacer zoom en una página, el zoom inicial o la anchura de la pantalla del dispositivo.

            Contenidos del artículo

            • Configuración metaetiqueta viewport
              • Ejemplo de la etiqueta viewport que no permite escalar la página
              • Ejemplo etiqueta viewport que permite escalar la página

            Configuración metaetiqueta viewport

            Cuando trabajamos con una web responsive es necesario definir un viewport adecuado, de lo contrario es muy probable que la página no lea correctamente los media queries y que se vea en formato muy reducido, siendo necesario hacer zoom para ver el contenido.

            La etiqueta viewport se define en el elemento <head> del documento HTML y puede contener diferentes atributos para ajustar el comportamiento de la página en dispositivos móviles.

            <meta name="viewport" content="...">

            Las propiedades más comunes utilizadas en «content» de la metaetiqueta viewport son:

            1. «width«: Especifica el ancho inicial del viewport. Por ejemplo, «width=device-width» establece el ancho inicial del viewport para que coincida con el ancho del dispositivo.
            2. «initial-scale«: Define el nivel de escala inicial del viewport. Por ejemplo, «initial-scale=1.0» establece que la página se mostrará inicialmente sin ninguna escala.
            3. «minimum-scale» y «maximum-scale»: Estos atributos permiten establecer los límites mínimos y máximos de escala del viewport, controlando si el usuario puede hacer zoom en la página.
            4. «user-scalable«: Este atributo permite habilitar o deshabilitar la capacidad del usuario para hacer zoom en la página. Si se establece en «yes», el usuario podrá hacer zoom; si se establece en «no», se deshabilitará el zoom.
            5. Height: altura virtual de la pantalla o altura del viewport.

            Un ejemplo de cómo se vería la metaetiqueta «viewport» en el código HTML es el siguiente:

            <!DOCTYPE html>
            <html>
            <head>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Mi página web</title>
            </head>
            <body>
              <!-- Contenido de la página -->
            </body>
            </html>

            Ejemplo de la etiqueta viewport que no permite escalar la página

            Lo más habitual es definir la anchura con el valor «device-width», que es una medida que hace referencia a la anchura de la pantalla del dispositivo, y no con una medida fija. Por lo tanto, con width=device-width conseguimos que el viewport sea igual a la anchura real de la pantalla del dispositivo, de modo que no se tratará de emular una pantalla mayor de lo que realmente es y veremos los píxeles reales.

            Con initial-scale=1 conseguimos definir la escala inicial del documento para evitar transformaciones. Ejemplo:

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

            También podemos hacerlo con user-scalable=no o con maximum-scale con un valor igual al de initial-scale conseguimos que el usuario no pueda hacer zoom en la página, con lo que siempre se mantendrán las medidas que nosotros hemos definido al construir la web. Ejemplo:

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

            Ejemplo etiqueta viewport que permite escalar la página

            Para no limitar al usuario el uso del zoom en nuestra página web y darle la posibilidad de agrandar y empequeñecer cualquier parte que necesite ver mejor lo ideal es no definir ni el maximum-scale ni el user-scalable=no. Ejemplo:

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

            Por lo tanto, es interesante que el usuario pueda hacer zoom en la página web (en un smartphone será con los dedos sobre la pantalla táctil). En este caso, el usuario no está cambiando los valores de viewport, sino la escala con la que se visualiza el documento.

            Ejercicio propuesto

            Define la etiqueta viewport en tu proyecto. Define el ancho igual al ancho del dispositivo y el resto de valores defínelos en base a tus propios criterios.

            Navegación de entradas

            ← Metainformación en HTML
            Resumen de etiquetas HTML →

            Tutorial HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Metainformación en HTML
            • 12. Configuración metaetiqueta viewport, web responsive
            • 13. Resumen HTML
            • 14. Ejercicios resueltos HTML

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados