<meta name="viewport">
The pact with the small screen: without it, the phone pretends to be a 980-pixel desktop.
Without this line, the phone's browser assumes the page was made for desktop: it renders into an imaginary window of some 980 pixels and shrinks the result until it fits. width=device-width, initial-scale=1 ends the charade — the page takes on the device's real width.
viewport-fit=cover extends the page behind the camera notch, with env(safe-area-inset-*) in the CSS shielding the content. The harmful myth is user-scalable=no: locking zoom is an accessibility barrier, and modern browsers do everyone the favor of ignoring the request.
<meta name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover">