Chrome设备预览已损坏？

Question

我对我尝试做响应式设计的行为感到非常困惑。我无法用语言表达，但this应该表明问题。

我用于此测试的代码是here。值得注意的是媒体查询：

@media screen and (max-width: 425px) {
  .container {
    flex-direction: column;
  }
}

为什么在“设备预览”视口的宽度小于425px时会触发此查询？

Answer 1

当您使用设备模式时，这是一个常见问题（不完全确定原因）。但大多数时候它在隐身模式下效果很好。或者，您可以清除网站数据并以设备模式导航到您的网站。

Answer 2

我现在有一个类似的问题，这是因为我忘记在我的html文件中设置视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">