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

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

场景 1:屏幕宽度为 638px:这符合我的预期。
场景 2:屏幕宽度为 639px:这是错误的!我预计 column639仍然要隐藏!
场景 3:屏幕宽度为 640px:符合我的预期。
场景 4:屏幕宽度为 641px:符合我的预期。

问题:

场景 2 中像素不准确的原因是什么，为什么是 639px值(value)与其他值(value)区别对待？

可重复性:

奇怪的是，它无法在任何地方重现(将窗口大小调整为693px的宽度:

Google Chrome:我可以重现，(86.1.6938.200，64-bit)
Mozilla Firefox:我可以重现，(87.0.4280.88，64-bit)
JSFiddle:我无法重现(如预期的所有场景): https://jsfiddle.net/vop23ang/
CodePen:我可以重现(如预期的所有场景，您需要更改 View 以水平调整大小):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 :