Search code examples
htmlmeta-tags

What exactly the effect of the viewport meta on elements width?

I read a w3school tutorial about viewport meta tag, so they give 2 examples to explain the usage of the tag:

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

The first example one without it shows as expected, while the second example with the tag adjust the image width on smartphones making it 100% the viewport width, witch doesn't make sense to me. Why would setting the virtual width equal to the device width make that kind of adjustment, the image shouldn't normally fit the whole width in both cases as it's set width of 460px is smaller than my device width of more than 1000px and a wider virtual width.

My second inquiry is about initial-scale=1, shouldn't that be the default value, what would be different if we didn't declare it.

Thank you for your attention.

Solution

  • Look at the CSS for that page.

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

    The max-width overrides the width.