英文:
Testing Responsive Design: Manually Dragging Browser Window vs Using Device Toolbar
问题
这是一直困扰我的问题，我从未真正理解为什么会发生这种情况：
当我测试我正在开发的网站的响应性时，有时我会点击“切换设备工具栏”并选择特定的设备尺寸，有时我会简单地拖动浏览器窗口以使其变大或变小。
然而，尽管视口的宽度和高度值似乎相同，但两种方法之间的用户界面并不总是一致。
以下是我所描述的示例。
当我手动调整窗口大小（通过拖动）时，页面看起来像这样：
而当我切换设备工具栏时，页面看起来像这样：
正如您在图像中所看到的，尺寸是相同的，但右侧的导航栏在第一张图像中不显示，而在第二张图像中显示（事实上，使用设备工具栏时导航栏从不消失）。
是否有人知道为什么会这样？这对我来说并不是一个很大的问题，但我认为这可能是我运行页面上的一些 Cypress e2e 测试失败的原因之一。
实际上，似乎“切换设备工具栏”是 UI 实际上会看起来的准确表示，但当我运行 Cypress 测试时，快照看起来像第一张图像 - 当我通过拖动调整窗口大小时。结果，一些按钮最终在页面上不可见，但当我在任何设备上实际打开页面时（笔记本电脑、平板电脑、移动设备等），它们是可见的。
是否有人能提供关于这个问题的见解？我也只是好奇为什么会发生这种情况。
这是有关实际网站的链接：https://ddmal.music.mcgill.ca/Neon/editor.html?manifest=CF-005
谢谢！
1: https://i.stack.imgur.com/uZItv.png
英文:
This is something that has been bothering me for a while, and I never really understood why this happens:
When I'm testing the responsiveness of websites I'm working on, sometimes I will click on "Toggle device toolbar" and select specific device sizes, and sometimes I will simply drag the browser window to make it larger or smaller.
However, the UI is not always consistent between the two methods, even though the width and height values of the viewport seem to be identical.
Below is an example of what I'm describing.
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:
As you can see in the images, the dimensions are the same, but the navbar on the right doesn't appear in the first image as it does in the second image (in fact, the navbar doesn't ever disappear when using the device toolbar).
Would anyone know why this is the case? This isn't a huge issue for me, but I believe it may be the cause of some of my Cypress e2e tests failing when I run them on the page.
In practice, it seems as though the "Toggle device toolbar" is the accurate representation of what the UI would actually look like, but when I run the Cypress tests, the snapshots look like the first image - when I resize the window by dragging. As a result, some of the buttons end up not being visible on the page, but they are visible when I actually open the page on any device (latop, tablet, mobile, etc.).
Would anyone happen to have any insight into this?
I'm also just curious why this is happening.
Here is a link to the actual website in question: https://ddmal.music.mcgill.ca/Neon/editor.html?manifest=CF-005
Thank you!
答案1
得分: 3
导航面板由CSS媒体查询控制：
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none!important;
}
}
这个问题Chrome设备模式仿真媒体查询不起作用讨论了这个问题，但它有点旧，所以值得直接测试。
这是您网页的简化版本：
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Comment out the following to see old behavior -->
<meta name="viewport" content="width=device-width">
<style>
#editor-body-container {
overflow: hidden;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: nowrap;
}
#right-column {
height: 100%;
width: 30%;
}
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none!important;
}
</style>
</head>
<body>
<div id="editor-body-container">
<div id="left-column"><h1>Left column</h1></div>
<div class="is-hidden-mobile" id="right-column"><h1>Right column</h1></div>
</div>
</body>
</html>
如果您添加/删除上述答案中提供的<meta name="viewport" content="width=device-width">，问题将得到纠正（您可能需要切换设备模式）。
英文:
The navigation panel is controlled by a CSS media query
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none!important;
}
}
This question Chrome Device Mode Emulation Media Queries Not Working discusses the problem, but it's a bit old so it's worth testing directly.
This is a simplified version of your web page
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Comment out the following to see old behavior -->
<meta name="viewport" content="width=device-width">
<style>
#editor-body-container {
overflow: hidden;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: nowrap;
}
#right-column {
height: 100%;
width: 30%;
}
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none!important;
}
</style>
</head>
<body>
<div id="editor-body-container">
<div id="left-column"><h1>Left column</h1></div>
<div class="is-hidden-mobile" id="right-column"><h1>Right column</h1></div>
</div>
</body>
</html>
If you add / remove the <meta name="viewport" content="width=device-width"> given in above answer, the problem is corrected (you may have to toggle the device mode)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论