Search code examples
htmlcssviewport

What exactly viewport meta tag does in html?

I have recently started learning about html and css. In particular, I am learning the responsive web design. I studied that meta viewport tag is one of the first steps in creating a responsive web design. In particular, I am studying from this link:

https://www.w3schools.com/css/css_rwd_viewport.asp

Here, they have given two images of a website on mobile screens of with and without viewport tag. In the first without screen, the image doesn't adjust itself with the screen with. But in the latter image, the image adjusts itself. Now, I get this point. I thought of replicating this using the following:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <img src="jeff.jpg">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sof</p>
</body>
</html>

It doesn't make the image change as i change the width. So, what's going on here?

I know, I can solve this issue by putting a css block of width:100% but I want to understand why viewport is not working that way it was mentioned on the website. Or am I missing any important piece?

Solution

  • The browser's viewport is the area of the window in which web content can be seen.

    The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.

    The initial-scale property controls the zoom level when the page is first loaded.

    Now, for images to be responsive in nature, we should always use viewport-relative units i.e %

    so, you should add

    img {
  width: 100%;
  height: auto;
}

    for the image to resize along with screen size. Hope it clarifies your doubt!