Chrome 模拟器未激活媒体查询答案

【问题标题】：Chrome Emulator not activating media queriesChrome 模拟器未激活媒体查询
【发布时间】：2015-05-30 18:09:46
【问题描述】：

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

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

有什么想法吗？

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

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

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

【问题讨论】：

我不会依赖模拟器，根据我的经验，它非常不准确。
我觉得模拟器有点痛苦。你在文档的头部有元标记吗？我知道的愚蠢问题。我发现 Firefox Developer 扩展允许您设置各种设备宽度，并且您可以在那里测试您的 MQ。不知道这有多大帮助:)
@mattytommo 我们也在 EOA 上运行设备测试，但模拟器有助于调试一点，或者习惯了！
@DeanWhitehouse 我只是在调试时调整浏览器的大小，这样看起来更可靠！
你能发布一些标记吗？你在使用表格布局吗？我刚刚在这里检查过，他们正在为内部内容设置最大宽度，这意味着它将在调整大小时缩小：zurb.com/playground/projects/responsive-email-templates/… 这是元标记：

标签： css media-queries html-email viewport meta-tags

【解决方案1】：

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

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

max-width 比max-device-width 更好，原因有很多。第一个是要触发某些Android手机，如果您使用max-device-width，则必须将其设置为水平分辨率（某些手机横向分辨率为1920px！），而max-width必须设置为视口宽度（大约480 像素）。在 iPhone 上，我上次检查时两者都是一样的。

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

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

【讨论】：