this is my understanding of the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
the viewport meta tag will set the width of the viewport to the width of
the device. So when the browser renders the page, it will set its dimensions
according to the width of the device and not to the default width which is
980px for many mobile browsers. This implies that the web page should
be rendered in full size without scaling it down.
although that's not what it happens here.
I've created a div with a width of 800px
and when i changed the screen's width to below 800px the page is scaled
down.
I was expecting that i would be scrolling to the right to see the whole
div because it wouldn't fit inside the viewport.
Please can somebody explain why the page was scaled down??
this is an image of the rendered div with viewport's width > 800px
this is an image of the rendered div with viewport's width < 800 px
this is the code:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
}
.container {
width: 800px;
border: 5px solid rgb(250, 12, 12);
height: 200px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>`
