CSS max-width 的像素精度不准确答案

【问题标题】：CSS max-width has inaccurate pixel precisionCSS max-width 的像素精度不准确
【发布时间】：2021-04-04 19:03:45
【问题描述】：

我对@987654333@ 媒体规则有疑问。我测试以隐藏不同 max-width 值上的元素并且行为不一致。我已经测试了 4 种不同屏幕宽度的场景。

场景1：屏幕宽度为638px：这符合我的预期。
场景 2：屏幕宽度为 639 像素：这是错误的！我希望 column639 仍然被隐藏！
场景 3：屏幕宽度为 640px：这符合我的预期。
场景 4：屏幕宽度为 641px：这符合我的预期。

问题：

场景 2 中像素不准确的原因是什么？为什么639px 值的处理方式与其他值不同？

重现性：

奇怪的是，它不能到处复制（将窗口大小调整为693px的宽度：

谷歌浏览器：我可以重现，(86.1.6938.200, 64-bit)
Mozilla Firefox：我可以复制，(87.0.4280.88, 64-bit)
JSFiddle：我无法重现（所有场景都符合预期）： https://jsfiddle.net/vop23ang/
CodePen：我可以重现（所有场景如预期，您需要更改视图以水平调整大小）：https://codepen.io/nikolas-charalambidis/pen/YzGYPGE

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>max-width issue</h1>
        <div class="column column639">
            <h2>Column 1</h2>
        </div>
          
        <div class="column column640">
            <h2>Column 2</h2>
        </div>
    </body>
</html>

.column {
    width: 100%;
    background-color: cyan;
}

@media screen and (max-width: 639px) {
    .column639 {
        visibility: hidden;
    }
}

@media screen and (max-width: 640px) {
    .column640 {
        visibility: hidden;
    }
}

场景：

场景一：屏幕宽度为638px：

场景2：屏幕宽度为639px：

场景3：屏幕宽度为640px：

场景4：屏幕宽度为641px：

【问题讨论】：

刚刚自己在 Chrome 上尝试过，在我的浏览器上，第 1 列确实按预期隐藏在场景 2 中。诡异的。我使用window.innerWidth 在调整大小时获取宽度，如果这是相关的
@AnisR.：有趣的是，JSFiddle 无法重现该行为。我花了整整一个晚上弄清楚发生了什么：/
哇哦。事实上，我正在 JSFiddle 中进行测试
您能看看this Chromium bug 并检查它是否相关吗？我遇到了this other similar question，在那里我发表了同样的评论。 ;)
@LouysPatriceBessette 感谢您的链接。我真的不知道，我不能说（我的前端熟练度略高于零）。但是，我想在那里创建一个错误。它可能会导致更多相关信息，

标签： html css google-chrome responsive-design media-queries

【解决方案1】：

max-width 包括您提供的宽度限制：equal or narrower。

例如，只有当浏览器的视口宽度等于或小于 12450 像素时，此 CSS 才会应用样式：

@media (max-width: 12450px) { ... }

Documentation

我做了一个codepen 来测试它。试试看。

结果如我所愿……

【讨论】：

我知道max-width 中的数字是包含的。但是，它并没有解释为什么@media screen and (max-width: 639px) 不会在媒体查询中触发visibility: hidden。请注意，场景 2 清楚地显示了可见的 div，尽管它应该仍然是 hidden，只要 639px 包含在媒体查询中并满足文档要求。
您是否只是在观看关于在您的代码笔中调整大小的小型代码笔工具提示？也许那是不准确的事情......
是的，我愿意。我必须说这很奇怪：ibb.co/8nkvZQt
只要我在 CodePen 而不是在 JSFiddle 上重现，我猜这个问题与不同的实现有关。问题的根源可能在于 GoogleChrome 处理这些问题的方式不同。
有趣的是，您的浏览器版本号略有不同。你在 Mac 上吗？

【解决方案2】：

这已被报告并接受为可在多个版本上重现的错误。目前，它正在由开发团队审核。

关注问题#1162102了解更多详情，不过，一旦问题解决，我会更新答案。

【讨论】：