What does the <meta name="viewport"> tag do?

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

Without it, mobile browsers emulate a ~980px viewport and scale the page down → media queries don't match and text is tiny. width=device-width tells the browser to use the real device width in CSS pixels.

Avoid user-scalable=no / maximum-scale=1 - they block pinch zoom and fail WCAG.