La ventana gráfica es el área de contenido de la página web que es visible para el usuario o el visitante de la página. La ventana gráfica no tiene un tamaño fijo, varía con el tamaño de la pantalla a medida que disminuye o aumenta el tamaño de la ventana gráfica.
En épocas anteriores, cuando los teléfonos y las tabletas no se usaban para acceder a las páginas web, los diseños estáticos y de tamaño fijo eran comunes, pero cuando se introdujeron los teléfonos y las tabletas en Internet, las páginas de tamaño fijo eran muy grandes para esas pantallas. tamaños Luego, para resolverlo, se introdujo la ventana gráfica HTML .
Sintaxis:
<head>
<meta name="viewport"
content= "width=device-width,
initial-scale=1.0">
</head>
Esta es la implementación común de la ventana gráfica que se usa para varias páginas web que varían en el dispositivo.
- width = device-width: la propiedad de ancho establecida con un valor especial que varía para diferentes dispositivos de ancho de pantalla a una escala de 100% . También es posible asignarlo con un valor fijo en la unidad ‘px’ (es decir, ancho = 350px).
- initial-scale = 1.0: La propiedad initial-scale define el zoom inicial de la página web en el momento en que se carga por primera vez en el navegador.
Propiedades de la etiqueta HTML <Meta> :
- escala inicial: esta propiedad se utiliza para definir el ancho de la ventana gráfica del dispositivo utilizado para visitar la página web.
- escalable por el usuario: esta propiedad permite que el dispositivo se acerque o aleje, los valores serán «sí» o «no».
- ancho: esta propiedad se utiliza para definir el ancho de la ventana gráfica del dispositivo utilizado para visitar la página web.
- altura: esta propiedad se utiliza para definir la altura de la ventana gráfica del dispositivo utilizado para visitar la página web.
- escala mínima: esta propiedad se utiliza para definir el nivel de zoom mínimo al que un usuario puede hacer zoom en la página.
- escala máxima: esta propiedad se utiliza para definir el nivel de zoom máximo al que un usuario puede hacer zoom en la página.
Ejemplo 1: El siguiente ejemplo ilustra cómo se verá el contenido en la página web si no usamos la etiqueta <meta> con valor de ventana gráfica. El texto inferior no se muestra completo ya que no se utiliza la etiqueta <meta>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Use of viewport value in meta tag</title> </head> <body> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png" alt="GeeksforGeeks"> </div> <h2>Welcome to GFG!</h2> <h4>A computer science portal for all geeks.</h4> <h3>Our Achievements: </h3> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. </p> </body> </html>
Producción:
Ejemplo 2: El siguiente código muestra la salida de la ventana gráfica usando la etiqueta <meta> . La salida se muestra con respecto a la ventana gráfica del iPhone.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Use of viewport value in meta tag</title> </head> <body> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png" alt="GeeksforGeeks"> </div> <h2>Welcome to GFG!</h2> <h4>A computer science portal for all geeks.</h4> <h3>Our Achievements: </h3> <p> Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. </p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA