移动设备上的网站呈现错误

Question

这里的问题。页面渲染底部有奇怪的工件，但仅在移动设备上，仅在纵向模式下。我建议它导致错误的包装设计。这里有一些css：

   html {
       height: 100%;
       box-sizing: border-box;
   }

   *,
   *:before,
   *:after {
      box-sizing: inherit;
   }

   body {
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
      min-width: 1260px;
      margin: 0px;
      padding-top: 70px;
   }

看起来像这样：

Here's the site on production

Answer 1

这是视口问题。我仍然不知道为什么，但我们需要限制视口

  

最小规模= 1.0

正确渲染

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

将此添加到标题