CSS max-width 像素精度不准确

Question

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

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

问题：

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

再现性：

奇怪的是，不能到处转载（resize the window to the width of 693px:

Google Chrome: 我可以重现，(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;
    }
}

场景：

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

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

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

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

Answer 1

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

For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 12450px:

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

Documentation

我做了一个 codepen 来测试。试试吧。

结果如我所料...

Answer 2

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

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

CSS max-width 像素精度不准确

CSS max-width has inaccurate pixel precision

html

css

google-chrome

media-queries

responsive-design