The viewport meta tag tells a mobile browser how wide to lay out the page and how far to zoom. Without it, a phone lays the page out in a virtual viewport, usually 980px wide, then shrinks it to fit, so text renders tiny.
width=device-width makes the layout viewport match the device's width in CSS pixels.
initial-scale=1.0 opens the page at normal zoom instead of zoomed out.
user-scalable=no blocks pinch zoom. Avoid it, because it stops people with low vision from enlarging the text.
Responsive CSS depends on this tag. Media queries test the layout viewport, so without it a phone matches the desktop breakpoints. On phones with a notch, adding viewport-fit=cover extends the page under it, and env(safe-area-inset-top) and its siblings pad content back into view.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
