html - 响应图像在 Safari 中不会达到 100% 宽度(在 Chrome 中很好)

Question

在我的网站上，我使用媒体查询根据设备尺寸调整元素大小。这工作正常，元素在任何浏览器(Chrome、Safari 等)中都可以很好地调整大小。

不过我有一个大问题，那就是我有一个以自动宽度开头的 Logo img 标签，然后在移动设备上(媒体查询工作正常，它会使用react并应用样式)它应该转到100% 宽度，所以它占据了整条线。这在 Chrome 和 Firefox 中运行良好，但在 Safari 中不起作用。

使用 Safari 开发工具我可以看到它实际上对元素应用了 100% 的宽度，但它实际上并没有计算视口(viewport)的 100% 宽度，而是计算了一些其他数字(不确定它来自哪里) .

所以本质上，问题是在 Safari 中(并且仅在 Safari 中)当我尝试响应式地将 100% 宽度应用于元素时它无法正常工作。它已应用但实际上不是完整的视口(viewport)宽度。

我有我的视口(viewport)元标记等等，但这发生在桌面和移动 Safari 上，所以我怀疑是不是这样。

有什么想法吗？

我将分享一些代码:

.Logo
  width: 100%
  margin-top: 3em
  margin-bottom: 2em
  display: block
  text-align: center

  @media (min-width: mobile-nav-break)
    margin-bottom: 3em
    text-align: left
    margin: 0
    flex: 1

  img
    height: 3em

那是我的 Logo 的 CSS。它在 Stylus 中，但它呈现出您期望呈现的样子。它在任何大小的 Chrome 中看起来都很好(也在断点以下)。

“重复问题”根本不是重复问题。在我的例子中， Logo 不应该自动缩放，只有它的容器应该达到 100%。

Answer 1

将此元标记添加到您的头部。元名称视口(viewport):

<meta name="viewport" content="width=device-width,initial-scale=1" />