css - Chrome 模拟器不激活媒体查询

Question

我正在构建一个 HTML 电子邮件并一直在使用 Chrome 模拟器来测试响应状态，但现在模拟器没有触发媒体查询。

@media only screen and (max-device-width: 480px)

有什么想法吗？

我试过多次重启，模拟器在其他网站上运行良好。附件是一张屏幕截图，显示了当我在控制台中选择“body”元素时发生的情况。

编辑问题是由于删除了视口(viewport)元标记，但建议将其从响应式电子邮件中删除...有人知道解决方案吗？

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

Answer 1

尝试使用最大宽度。 Chrome 模拟器在我的 Chrome 上正确显示响应式电子邮件，我在我的所有模板上都使用它。

@media only screen and (max-width: 480px)

由于多种原因，

max-width 优于 max-device-width。主要的一个是触发某些 Android 手机，如果您使用 max-device-width，您必须将其设置为水平分辨率(在某些横屏手机上为 1920px!)，而 max- width 必须设置为视口(viewport)宽度(大约 480px)。在 iPhone 上，我上次检查时两者都是一样的。

最好在电子邮件媒体查询中使用 max-width。

此外，您不必设置 480px，我倾向于设置更高的值，580px 或比外部容器宽度小 1px。