EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Media queries
            Media queries CSS para cumplir las necesidades del diseño responsive
            20/10/2019
            Sombras CSS en texto y contenedores
            Sombras CSS en texto y contenedores o cajas
            22/10/2019

            Configuración metaetiqueta viewport, web responsive

            metaetiqueta viewport

            configuracion metaetiqueta viewport web responsive

            Tabla de contenidos

            • 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
            • Ejercicios propuestos

            Configuración 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.

            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.

            Disponemos de los siguientes parámetros en la metaetiqueta viewport.

            • Width: anchura virtual (emulada) de la pantalla o anchura del viewport.
            • Height: altura virtual de la pantalla o altura del viewport.
            • Initial-scale: la escala inicial del documento.
            • Minimum-scale: la escala mínima que se puede establecer en el documento.
            • Maximum-scale: la escala máxima configurable en el documento.
            • User-scalable: si se permite al usuario hacer zoom.

            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.

            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="width=device-width, initial-scale=1, maximum-scale=1">
            <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.

            Ejercicios propuestos

            Actividad 3

            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.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results