How to make smaller layout render on mobile devices?

Question

css

Hello. It's no secret that, despite the high screen resolution of mobile devices, the browser of mobile devices displays layouts of other sizes. So, for example, iPhone 7 with its fullhd screen displays a layout of 375 pixels.
I made a website and realized that the minimum width of my website is 533 pixels. It makes no sense to type up further, because the whole meaning of the site is collapsing. So I have media only screen and (min-width : 533px) . But if in the browser (in inspector mode) you open my site in iphone 7 mode, then the site will not be displayed correctly, since it has a size smaller than 533.
Tell me how to make it so that devices that have (or their own) when rendering resolution less than 533 displayed layout at 533?

Answer 1

Via JavaScript check screen sizes and dynamically change viewport tag
https://www.quirksmode.org/blog/archives/2011/06/d...

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/M...
shpargalkablog.ru/2013/06/layout.html

Answer 3

https://developer.mozilla.org/en/docs/Mozilla/Mobi...