How to fit the actual page width into the available device width?

Question

css

It looks like an elementary task, but it does not work. Tell me please.
There is a page. The body is set to min-width = 450px
How can I make the scale shrink so that the entire page width fits the width of the device when opened on a device with a width of 320px?
This is how it didn't work:

<meta name="viewport" content="width=device-width">

If I try to scale using javascript, the result is quite strange: the width still does not fit on the device, but all elements and fonts are reduced.
Thanks in advance.

Answer 1

To do nothing. Then the devices themselves will compress the page.

Answer 2

in any case, you need to dance from

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

because otherwise the browser itself will conjure with fonts and other things
And since you have decided that the minimum width is 320, then set it to the minimum or override it in media

Answer 3

Of course, if you set the size of the container to a smaller size, then the content will "leak out" due to the fixed sizes.
You need to create an mq point where you resize both the container and the content.
And I advise you to indicate with such a width as a percentage, if the design allows.