Web page zooms out on mobile devices Bootstrap 4

Question

I have made a web app and styled it using bootstrap 4 . I have added media query such that on mobile devices font-size can be increased and the padding present due to .container a class can be removed. I used the following code to do that

I used max-width: 1200px thinking that most of the smartphones are 1080p so it will be good for the majority of smartphones.

@media (max-width: 1200px) and (orientation: portrait) {
  .container {
    min-width: 100%;
    /* font-size: 120%; */
  }
}

It works fine but whenever I touch on input fields and the keyboard pops in the UI zooms out and looks like as it looks in the desktop browser.

When I removed (orientation: portrait) property. Then the previous problem was solved, but on desktops with HD or less resolution CSS in media query is applied and the webpage looks ugly as all input fields are expanded and font increases.

I tried searching several methods online but it didn't solve the problem. I also tried using user-scalable=no from the meta tag but not works.

<meta name='viewport' content='user-scalable=0'>

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

but still the problem exists, Can anyone help me how can I fix this error?

Source Code of my WebApp

https://github.com/sachinverma53121/auction-app

Answer 1

add this meta tag in your head tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">