How to make Bootstrap render web pages correctly on small smartphones?

Question

css

I'm using the fourth version of Bootstrap. When opening the site on the iPhone 5S in portrait orientation, I see that the right and considerable part of the page is outside the screen borders. You have to scale the page.

For some reason, the browser thinks that the page should be scaled not by the width parameter of 320 px, but by the screen height: 568 px. In landscape orientation, everything is as it should, of course.

How to make Bootstrap and browser interact correctly in this case?

Add breakpoint in SASS for 320px screen? So-so way out. However, div.container has a margin-left of auto, which makes a huge indentation on the left. Yes, it can be reset via CSS, but then there is a huge indent on the right.

Use JavaScript to change the container class to container-fluid on such screens? I wouldn't really like it either.

What do you advise?