Mobile websites are presented wider than the device, once pinched is ok

Question

I am designing Websites that needs to be responsive.

My problem is that in mobile devices these Websites are presented wider than the screen at first. It means I could move it left or right, like the main-container is not "fixed" to 100%. But it is:

#main-container {
    width: 100%;
}

But once I "pinch" the screen (press together with the fingers), the Website are perfectly presented, all DIVS are inside the screen and the site is readable. Like a perfect responsive Website.

If I refresh or navigate to a sub-page the site is again bigger than the screen and need to be put together and all is ok again.

It happens in all smartphones (Android and iphones) under 414 pixels wide. Tablets and up are ok

How could I "say" to my Websites that they should open inside the Device, wherever it is?

Answer 1

Maybe defining the initial-scale of the meta tag viewport will help you.

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

Read more about it here: https://www.w3schools.com/css/css_rwd_viewport.asp