reactjs - 移动 View 上的 CSS 格式设置有问题

Question

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

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

当我使用开发工具模拟移动 View 时，我看不到这个额外的空间，但是当我在各种移动浏览器上查看网站时，空间就在那里，而且应用程序不会自动调整。

这是我的媒体查询中的当前 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会工作:)