css - 为什么媒体查询在具有相同分辨率的不同网站响应测试中显示不同的外观

Question

我在编写媒体查询并在 1366 x 768 的分辨率上对其进行测试时遇到了一些视觉差异，并且正在使用另一台分辨率设置为 1366 x 768 的显示器，我还在其他几个“测试您的网站响应能力”上进行了检查并尝试了其中两个与我的另一台显示器进行比较，它们看起来都不同。

我正在使用的媒体查询是

@media screen and (max-height: 768px){
    #AttachMods.on-dock {
        width: 265px !important;
    }

    #AttachMods.on-dock #treelist {
        height: 100px !important;
    }

    #AttachMods.on-dock #TreeSelectItems {
        height: 100px !important;
    }

    #AttachMods.on-dock #ImagePath {
        height: 122px !important;
    }
}

这是我设置为 1366x768 的显示器上的外观

这是它在我的笔记本电脑上的外观，1920x1080，但使用的是网站响应测试仪，设置为 1366x768

这是一个不同的，使用另一个设置为 1366x768 的响应测试器

我的问题是为什么会这样，并且没有一堆不同的设备，哪一个是媒体查询的真实表示？

标签： cssresponsive-designmedia-queries