HTML | Etiqueta meta de ventana gráfica para diseño web receptivo

¿Qué es la ventana gráfica?
La ventana gráfica de un navegador es el área de la página web en la que el usuario puede ver el contenido. La ventana gráfica no tiene el mismo tamaño, varía con la variación en el tamaño de la pantalla de los dispositivos en los que se ve el sitio web. Para una computadora portátil, la ventana gráfica tiene un tamaño más grande en comparación con un teléfono inteligente o una tableta.

Ejemplo:
la pantalla del portátil es más ancha

En los teléfonos inteligentes, la página se ajusta debido a una pantalla más estrecha

Nota: cuando una página no se adapta a ventanas gráficas más pequeñas, se ve mal o incluso se rompe en una pantalla más pequeña. Para solucionar este problema, introduzca una etiqueta receptiva para controlar la ventana gráfica. Esta etiqueta fue introducida por primera vez por Apple Inc. para Safari iOS.

Sintaxis:

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

Esta es la configuración común de la ventana gráfica utilizada en varios sitios web optimizados para dispositivos móviles. La propiedad width gobierna el tamaño de la ventana gráfica. Es posible establecerlo en un valor específico («ancho = 600») en términos de píxeles CSS. Aquí se establece en un valor especial («width= device-width») que es el ancho del dispositivo en términos de píxeles CSS a una escala del 100 %. La propiedad de escala inicial gobierna el nivel de zoom cuando la página se carga por primera vez.

Nota: la etiqueta meta debe agregarse en la etiqueta principal en el documento HTML.

Una etiqueta Responsive tiene los siguientes atributos:

  • width : Ancho de la ventana virtual del dispositivo.
  • altura : Altura de la ventana virtual del dispositivo.
  • escala inicial : Nivel de zoom cuando se visita la página por primera vez.
  • escala mínima: Nivel de zoom mínimo al que un usuario puede hacer zoom en la página.
  • escala máxima : Nivel de zoom máximo al que un usuario puede hacer zoom en la página.
  • escalable por el usuario : indicador que permite que el dispositivo se acerque o aleje (valor = sí/no).

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>GeeksforGeeks</title>
        <meta charset="utf-8" name="viewport" 
        content= "width=device-width, initial-scale=1.0">
        <style>
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:green;
                text-align:center;
            }
            .geeks {
                font-size:17px;
                text-align:center;
            }
            p {
                text-align:justify;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <div class = "geeks">A computer science portal for geeks</div>
          
          
        <p>Prepare for the Recruitment drive of product based companies like
        Microsoft, Amazon, Adobe etc with a free online placement preparation
        course. The course focuses on various MCQ's & Coding question likely
        to be asked in the interviews & make your upcoming placement season 
        efficient and successful. </p>
        <p>An extensive Online Test Series for GATE 2019 to boost the 
        preparation for GATE 2019 aspirants. Test series is designed 
        considering the pattern of previous years GATE papers and ensures
        to resemble with the standard of GATE. This Test Series will help
        the aspirants track and improve the preparation through questions
        of various difficulty levels. There will be two Test Series 
        covering the whole syllabus of GATE, including Mathematics and
        Aptitude. Test Series I will cover the basic and medium difficulty, 
        whereas in Test Series II difficulty will be slightly higher. </p>
    </body>
</html>                    

Salida:
Amplia Salida de pantalla:
pantalla ancha
Estrecha Salida de pantalla:
pantalla estrecha

Publicación traducida automáticamente

Artículo escrito por Kushagra7744 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *