最大宽度 767px 媒体查询 - 样式仅在 766px 或以下呈现（仅影响 firefox）

Posted 2023-03-06

【中文标题】最大宽度 767px 媒体查询 - 样式仅在 766px 或以下呈现（仅影响 firefox）

【英文标题】：max-width 767px media query - styles only render at 766px or below (only firefox affected)

【发布时间】：2015-04-11 14:15:13

【问题描述】：

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

我通过 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

【问题讨论】：

嗯，有趣！您是否尝试查找 bugzilla 中是否已经存在这样的错误？

我不知道有 bugzilla，但我已经提交了错误报告。我会在这里写回我收到/学到的任何其他信息。非常感谢您的回复！

对我来说，FF 和 Chrome 现在也有相同的错误。我现在用max-width: 767.8px 修复了它，767px 的样式适用于这个宽度。

【参考方案1】：

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

我相信这会导致手机模拟 iframe 的计算失败，在该 iframe 内应该低于 767 像素的阈值。

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

【参考方案2】：

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

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

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