移动视图上的CSS格式有问题

Question

当我在移动设备上查看我的React应用程序时，总是在右边有额外的空间：

https://dsousadev.github.io/23imgs/

使用开发人员工具模拟移动视图时，我看不到多余的空间，但是当我在各种移动浏览器中查看网站时，空间就存在了，并且应用程序无法自动适应。

这是我的媒体查询中的当前CSS：

@media all and (max-width: 414px) {
  .ImageCard,
  #CardImage {
     width: 314px;
  }
  #CardImage {
    height: 314px;
  }
  ul {
    font-size: 1.2rem;
    padding: 0 15px;
  }
}

Answer 1

元素<input accept="image/*" name type="file">引起了问题。

如果我将display: none应用于.fileContainer input，空格将消失。

编辑

好的，所以进一步研究这个问题，看来semantic.min.css正在将font-size: 100%应用于button, input, optgroup, select, textarea。这导致您输入的内容增加（visible时的输入内容）：

如果我们禁用font-size: 100%，则输入将正确呈现：

之后，您的原始样式将起作用：

因此display: none或还原font-size都可以：）