CODEWITHSUNDEEP
htmlcssresponsive-designviewport
dalenza
dalenza

Reputation: 11

understanding the viewport meta tag

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>`

Upvotes: 1

Views: 9858

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

Your understanding of what the viewport meta tag does is correct.

If you've included

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

in the head of your page, and if the page has an element that is 800px wide, you should have horizontal scrolling on mobile devices.

Here's a comparison of the same page without and with a viewport meta tag.

enter image description here

Codepen without meta tag:
https://codepen.io/panchroma/pen/QWvBKbZ

Codepen with meta tag:
https://codepen.io/panchroma/pen/mdmjrEq

If your sample page still isn't working for you, double-check your code for typos or share the URL so we can help you out

Upvotes: 3

Related Questions