Este blog explicará cómo usar una metaetiqueta de ventana gráfica para el diseño web receptivo en HTML:
¿Qué es la metaetiqueta de ventana gráfica?
El ' mirador ” es la etiqueta más importante para crear un diseño receptivo al controlar cómo aparece el contenido en diferentes tamaños de pantalla. Esta etiqueta se coloca dentro del “
Diferentes atributos de la metaetiqueta de ventana gráfica
La etiqueta meta de la ventana gráfica tiene los siguientes atributos que se pueden colocar como un valor para el ' contenido ' atributo:
atributo 'ancho'
El ' ancho El atributo ” especifica el área visible de una página web para el contenido verticalmente. Su metaetiqueta se ve así:
< meta nombre = 'ventana de visualización' contenido = 'ancho = ancho del dispositivo' >
atributo 'altura'
El ' altura El atributo ” establece la longitud vertical de la página web para garantizar que la altura de la ventana gráfica coincida con la altura de la pantalla. Su metaetiqueta se ve así:
< meta nombre = 'ventana de visualización' contenido = 'altura=400' >
Atributo 'escala inicial'
El ' escala inicial El atributo ” garantiza que la página web se muestre con un nivel de zoom adecuado cuando se cargue por primera vez. Por ejemplo, visite el siguiente código:
< meta nombre = 'ventana de visualización' contenido = 'ancho=ancho-del-dispositivo, escala-inicial=1.0' >atributo de 'escala máxima'
El ' escala máxima El atributo ” especifica el nivel máximo de zoom de la página web para evitar problemas de diseño:
< meta nombre = 'ventana de visualización' contenido = 'ancho = ancho del dispositivo, escala máxima = 1.0' >
atributo de 'escala mínima'
El ' escala mínima ” se utiliza para impedir que el usuario se aleje demasiado especificando el nivel mínimo de escala de alejamiento:
< meta nombre = 'ventana de visualización' contenido = 'ancho = ancho del dispositivo, escala mínima = 0,5' >Atributo 'escalable por el usuario'
El ' escalable por el usuario El atributo 'permite o no permite que el usuario haga que la pantalla de la página web se aleje o se acerque estableciendo el valor en' no ' o ' Sí ”. La metaetiqueta que permite al usuario acercar o alejar es:
< meta nombre = 'ventana de visualización' contenido = 'ancho = ancho del dispositivo, escalable por el usuario = sí' >¿Cómo usar la metaetiqueta de ventana gráfica para un diseño web receptivo en HTML?
Para comprender mejor el uso de una metaetiqueta de ventana gráfica para el diseño web receptivo. Veamos un ejemplo:
Supongamos que dentro del “ Después de la compilación del fragmento de código anterior, la página web se ve así: El resultado muestra que el contenido no responde, ya que no se muestra perfectamente en dispositivos pequeños. Ahora, para que responda, agregue el ' mirador ” metaetiqueta: Después de actualizar el código, la página web se ve así en diferentes tamaños de pantalla: El resultado final ilustra que la página web ahora responde después de agregar una metaetiqueta dentro del ' La metaetiqueta de ventana gráfica permite al desarrollador proporcionar un conjunto de instrucciones al navegador que establece cómo se muestra la página web en dispositivos de diferentes tamaños de pantalla. La metaetiqueta se coloca dentro de “ ' etiqueta: < división >
< pag >
< b > Desarrollado por Linuxhint, para comprender mejor la metaetiqueta de la ventana gráfica, abra la página web en una pantalla diferente tamaño dispositivos.< / b >
< / pag >
< imagen origen = '../bg.jpg' todo = 'pirata informático' ancho = '460' altura = '345' >
< pag estilo = 'relleno:5px' >
< i >Únase al equipo de Linuxhint < / i >
Desarrollado por Linuxhint, para comprender mejor la metaetiqueta de la ventana gráfica, abra la página web en una pantalla diferente tamaño dispositivos. Desarrollado por Linuxhint, para comprender mejor la metaetiqueta de la ventana gráfica, abra la página web en una pantalla diferente tamaño dispositivos. Desarrollado por Linuxhint, para comprender mejor la metaetiqueta de la ventana gráfica, abra la página web en una pantalla diferente tamaño dispositivos. Desarrollado por Linuxhint, para comprender mejor la metaetiqueta de la ventana gráfica, abra la página web en una pantalla diferente tamaño dispositivos.
< / pag >
< / división >
< meta nombre = 'ventana de visualización' contenido = 'ancho=ancho-del-dispositivo, escala-inicial=1.0' / >
< / cabeza >
Conclusión