2

He estado investigando acerca de como funciona la etiqueta viewport, tengo entendido que en un principio se usaba para configurar la cantidad de pixeles emulados por los navegadores de los dispositivos moviles de manera que pudiese caber toda la pagina en el espacio visible, de manera de que si el dispositivo tenia 500px de ancho emulados y la pagina midiese 900px el viewport se pudiese ajustar a ese ancho haciendo uso de esa etiqueta.

Estaba tratando de hacer un par de pruebas con esa etiqueta como la que mostrare a continuacion:

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

Con esto mi teoria es que ahora mi ordenador deberia tener 590 pixeles emulados y no los que tenia anteriormente que eran el tamaño de la ventana y si yo creaba un div dentro de mi body por ejemplo y le daba un ancho de 590px este deberia cubrir todo el ancho de la pagina. pero no fue asi, la pantalla seguia teniendo el mismo ancho que antes y por ende mi div no cubrio todo el ancho de la pantalla. Aqui me surgieron dos dudas

¿Esta etiqueta solo surte efecto en navegadores de dispositivos moviles y es por eso que no me dio el resultado que esperaba en el ordenador?

Aunque tambien hice la prueba con la herramienta de desarrollo de mozilla y la figura no se escalo de manera que quedara justamente cubriendo toda la pantalla pero no me salio nuevamente el resultado que esperaba

introducir la descripción de la imagen aquí

Aqui muestro el codigo completo con el que realice esta prueba

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=590,initial-scale=1.0">
    <title>Document</title>
    <style>
      body{
        padding: 0;
      }
      div{
        margin: 0;
        width: 590px;
        height: 800px;
        background-color: blue;
      }
    </style>
</head>
<body>
    <div>
    
    </div>
</body>
</html>
¿Que cosa es lo que puedo no estar comprendiendo acerca del funcionamiento de meta viewport?

1
  • Hola, imagino que en el código que posteaste hay un error, porque dices que usas width=590 y en el código se aprecia width=device-width. Saludos Commented el 7 may. 2019 a las 7:59

1 respuesta 1

0

Antes de nada, aclarar que viewport es el área del sitio visible, que normalmente tiene forma rectangular.

En navegadores, viewport sería la zona rosa.

Ventana de un navegador

Todo contenido no visible deberá emplear de herramientas como scroll para desplazarse por todo el sitio.

Frente al problema de que no todos los sitios de Internet están optimizados para distintas dimensiones de pantalla, se añadió viewport a la etiqueta meta para tratar de redimensionar un width al que, si se ha asignado un valor de 1000px, será perfectamente visible en una pantalla de 500px.

No añadir viewport da resultados como que aparezca un scroll horizontal, aparte del vertical, para poder visualizar todo el contenido a lo largo del sitio.

Aunque hay que destacar que si un sitio tiene estilos CSS que se adaptan a distintas pantallas, viewport se vuelve innecesario. De ahí a la importancia de utilizar porcentajes en vez de píxeles como unidad de medida a la hora de estilizar un sitio de Internet.

Te dejo un enlace con información adicional y espero haber respondido a tu pregunta.

A tale of two viewports — part one

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.