Html 网页在移动设备上缩小Bootstrap 4

我制作了一个web应用程序，并使用

bootstrap4

对其进行了风格设计。我添加了媒体查询，以便在移动设备上可以增大字体大小，并且可以删除由于

.container

类而存在的填充。我使用下面的代码来实现这一点

我使用了最大宽度：1200px，认为大多数智能手机都是1080p的，所以它对大多数智能手机都有好处

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

它工作得很好，但每当我触摸输入字段，键盘弹出时，UI就会缩小，看起来就像在桌面浏览器中一样

当我删除（方向：纵向）属性时。之前的问题解决了，但在高清或更低分辨率的桌面上，媒体查询中的CSS被应用，并且随着所有输入字段的扩展和字体的增加，网页看起来很难看

我试着在网上搜索几种方法，但都没有解决问题。我还尝试使用meta标记中的

user scalable=no

，但不起作用

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

但是问题仍然存在，谁能帮我解决这个错误

我的WebApp的源代码

---

将此

meta

标记添加到您的

head

标记中

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

---

字体大小增加，因为在

@media

查询中将

字体大小设置为
110%
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">