Question

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

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

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

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

我有我的视口元标记等等，但这种情况发生在桌面和移动版Safari上，所以我怀疑是不是。

有什么想法吗？

我将分享一些代码：

＆＃13;

.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

＆＃13;

这是我的徽标CSS。它在Stylus中，但它呈现的是你期望它呈现的东西。 Chrome在任何尺寸（也在断点之下）看起来都很好。

＆＃34;重复的问题＆＃34;完全不重复。在我的情况下，徽标不应该是自动缩放，只有它的容器应该达到100％。

Answer 1

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

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

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

1 个答案: