3

我已经解决了一半这个问题，但没有完全理解这个问题，这让我很担心。我想知道是否有人可以帮助我了解在玩什么？

我通过 CSS 将 iframe 设置为 100% 宽度。容器 div 为 767px。因此 iframe 也是如此。

我在 iframe 的样式表中有以下媒体查询：

@media (max-width: 767px) {
    body {
        background: red;
    }
}

在除 Firefox 之外的所有流行浏览器中测试，媒体查询生效并将正文背景设置为红色。在 Firefox 中，媒体查询仅在 iframe 设置为 766px - 1px 时才会生效，即使 max-width 应该是“最多并包括”。这似乎是一个错误。我现在的解决方法是将 iframe 宽度设置为 766.7 像素（减去 0.3 像素）。这似乎在 Firefox 中有效（减去 0.2 无效）。

我的问题 - 这里发生了什么？这实际上可能是 Firefox 中的错误吗？我知道我的 iframe 实现有点不规则，但我认为根本原因可能与启发我的解决方案的这个问题有关：Media query lost in Firefox when window resized to max-width minus scrollbar width

4

2 回答 2

1

FWIW，Chrome 上的相同行为是由于...标签的浏览器缩放设置设置为 125% 而不是 100%

我相信这会影响手机模拟 iframe 的计算，其中应该低于 767px 的阈值。

我花了一个小时将所有来源与旧部署进行比较，然后才注意到>_>

于 2016-04-19T10:11:36.457 回答
1

我遇到了同样的问题。我的浏览器中没有设置缩放，但我有一个 2K 显示器并使用 Windows 10 操作系统提供的显示自定义缩放，我认为这会导致 FF 和 Chrome 出现奇怪的行为。

要解决此问题，请尝试在 about:config 页面上将 layout.css.devPixelsPerPx 设置为 1.0（默认为 -1），看看是否有效果。

如有必要，您可以以 0.1 或 0.05 步（1.1 或 0.9）调整其值，直到图标或文本看起来正确。

于 2018-09-17T19:23:07.063 回答