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
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>
width=590
y en el código se apreciawidth=device-width
. Saludos