视口meta对元素宽度的确切影响是什么？

Question

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.

Answer 1

Look at the CSS for that page.

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

The max-width overrides the width.

Answer 2

In addition to Quentin's answer,

If you set the initial scale to "1.0" then the web page is displayed to match the resolution of the target density 1-to-1.