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

Question

我制作了一个网络应用程序并使用 bootstrap 4 设计了它的样式。我已经添加了媒体查询，以便在移动设备上可以增加字体大小，并且可以删除由于 .container 和 class 而存在的填充。我使用以下代码来做到这一点

我使用 max-width: 1200px 认为大多数智能手机都是 1080p，所以这对大多数智能手机来说都很好。

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

它工作正常，但每当我触摸输入字段并且键盘弹出时 UI 缩小并看起来像在桌面浏览器中的样子。

当我删除（方向：纵向）属性。然后前面的问题就解决了，但是在高清或者更低分辨率的桌面上应用了media query CSS，网页看起来很丑，因为所有的输入字段都被展开了，字体也变大了。

网上搜索了几种方法都没有解决问题。我也尝试使用元标记中的 user-scalable=no 但不起作用。

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

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

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

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

Answer 1

将此 meta 标签添加到您的 head 标签中

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

Web page zooms out on mobile devices Bootstrap 4