响应式图像在 Safari 中不会达到 100% 宽度（在 Chrome 中很好）答案

【问题标题】：Responsive image not going to 100% width in Safari (fine in Chrome)响应式图像在 Safari 中不会达到 100% 宽度（在 Chrome 中很好）
【发布时间】：2017-06-15 20:44:49
【问题描述】：

在我的网站上，我使用媒体查询来根据设备大小调整元素的大小。这可以正常工作，并且元素在任何浏览器（Chrome、Safari 等）中都可以完美调整大小。

不过我有一个大问题，那就是我有一个标志 img 标签，它以自动宽度开头，然后，在移动设备上（媒体查询工作正常，它会做出反应并应用样式）它应该去100% 宽度，所以它占据了整条线。这在 Chrome 和 Firefox 中非常有效，但在 Safari 中却不适用。

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

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

我有我的视口元标记和其他任何东西，但这发生在桌面和移动 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

那是我的标志的 CSS。它在 Stylus 中，但它会呈现您期望它呈现的内容。它在任何大小的 Chrome 中看起来都很好（也在断点之下）。

“重复的问题”根本不是重复的。在我的情况下，徽标不应该是自动缩放，只有它的容器应该达到 100%。

【问题讨论】：

您是否尝试将：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 添加到您的 HTML 中？既然你提到了，我想你会这样做，是否可以分享一些代码？
Safari 100% height and width exception的可能重复
你的场景中哪一部分和C语言有关？
@Gerhardh None，这是什么问题？
@daan.desmedt 正如我在问题中提到的，我有一个合适的视口标签。

标签： html css safari

【解决方案1】：

将此元标记添加到您的脑海中。元名称视口：

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

【讨论】：