@media 查询不起作用答案

【问题标题】：@media queries not working@media 查询不起作用
【发布时间】：2014-01-26 18:35:35
【问题描述】：

<style type="text/css">
@media only screen and (max-device-width: 480px) {
 td[class="body-copy"] {
     font-size:36px !important
}
</style>

<td class="body-copy" style="font-family:Verdana, Geneva, sans-serif; color:#FFFFFF; font-   
size:12px">Hi everyone</td>

嗨 - 我的电子邮件中的媒体简单查询（上面被截断）在 iPhone 上测试时根本不起作用。我做错了什么？

谢谢，吉姆

【问题讨论】：

iPhone 版本？为什么你有一个td 标签却没有table...？
嗨 - 这是一部 iPhone 5 - 我刚刚提取了我应用该类的元素，它位于一张桌子上。
我没有可以测试的设备，但只需使用max-width 代替...？ Basic Example Here
您是否尝试过将“-webkit-text-size-adjust:none”应用于电子邮件正文？第二种可能性是另一个 CSS 规则与这个冲突。

标签： html media-queries html-email

【解决方案1】：

尝试导入 media="screen"

<meta name="viewport" content="width=device-width, initial-scale=0, minimum-scale=1">

<style type="text/css" media="screen" >
    @media all and (max-width: 500px) and (min-width: 50px) {

也可以尝试 max-width 而不是 max-device-width 以在您的 PC 中查看结果

让我知道它是否有效

【讨论】：

您好 - 感谢您的输入，但遗憾的是没有任何更改 - 如果我将窗口拖得更小，甚至无法在浏览器中缩放。
但我刚刚在 Dreamweaver 预览窗口中注意到，如果我将窗口拖得更小，它确实会缩放...
感谢 Khaled - 但它仍然无法在设备上运行
您好，Khaled，没有变化。我想我要从头开始，我的代码中一定有一个错误，这不起作用。感谢您的所有帮助。
没问题，我认为您还需要更改媒体标签 @media all 和 (max-width: 500px) 和 (min-width: 50px) 的条件{ }

【解决方案2】：

这是因为 iPhone 5 的分辨率更高（1136 x 640 像素）。尝试增加最大宽度。

另外，max-width 比 max-device-width 效果更好，因为我认为它忽略了像素密度。

如果您想针对高分辨率设备而不触发屏幕（仅限于像素密集屏幕），您也可以尝试this。不确定它是否适用于 html 电子邮件，所以让我知道它是怎么回事。

【讨论】：

尝试在您的媒体查询声明中丢失[class=""]，看看它是否有效。这将有助于查明原因。任何媒体查询都有效吗？另外，您使用的是公司电子邮件地址吗？有时公司过滤器可以去除它们。
嗨，John - 这确实有效，但仅在浏览器中有效。如果我将浏览器窗口拖得更小，它可以工作 - 但它在电子邮件中不起作用！
你现在在用max-width吗？切换回max-device-width。使用宽度值直到它触发。从可笑的巨大开始，以确保它完全有效。如果一个很大的范围不起作用，那么您的服务器或您发送它的方式会剥夺某些东西。
嗨 - 谢谢.. 我试过 max-device-width 但它停止在浏览器中工作。放回去，它再次在浏览器中工作，响应不同的屏幕宽度，但在 IoS 邮件中没有任何工作..
这就是我现在的位置：