这是一件困扰了我一段时间的事情，我一直没有真正理解为什么会发生这种情况:
当我测试我正在处理的网站的响应性时，有时我会点击"切换设备工具栏"并 Select 特定的设备大小，有时我会简单地拖动浏览器窗口来放大或缩小它.
但是，这两种方法的用户界面并不总是一致的，即使视区的宽度和高度值看起来是相同的.
下面是我所描述的一个例子.
When I manually resize the window (by dragging), the page looks like this:
And when I toggle the device toolbar, the page looks like this:
正如你在图片中看到的，尺寸是一样的，但右边的导航栏不会像在第二张图片中那样出现在第一张图片中(事实上，当使用设备工具栏时，导航栏永远不会消失).
有没有人知道为什么会这样？这对我来说不是一个大问题，但我相信这可能是我在页面上运行一些Cypress e2e测试失败的原因.
在实践中，似乎"切换设备工具栏"是UI实际外观的准确表示，但当我运行Cypress测试时，快照看起来像第一张图像-当我通过拖动调整窗口大小时.结果，一些按钮最终在页面上不可见，但当我在任何设备(Laop、平板电脑、移动设备等)上实际打开页面时，它们都是可见的.
有人碰巧对此有什么见解吗？ 我也很好奇为什么会发生这样的事情.
这里有一个指向实际网站的链接:https://ddmal.music.mcgill.ca/Neon/editor.html?manifest=CF-005
谢谢!