Chrome模拟器未激活媒体查询

Question

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

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

有什么想法吗？

我尝试过多次重启，模拟器在其他网站上运行正常。附件是一个屏幕截图，显示当我选择＆＃34; body＆＃34;控制台中的元素。

EDIT 问题是由于删除了视口元标记，但建议将其从响应式电子邮件中删除...任何人都知道这个解决方案吗？

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

Answer 1

尝试使用max-width。 Chrome模拟器会在我的Chrome上正确显示自适应电子邮件，并在我的所有模板上使用它。

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

由于多种原因，

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

最佳做法是在电子邮件媒体查询中使用max-width。

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