Question

<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上测试时，我的电子邮件中的媒体简单查询（在上面截断）根本不起作用。我做错了什么？

谢谢，吉姆

Answer 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中的结果

让我知道它是否有效

Answer 2

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

此外，max-width的效果优于max-device-width，因为我认为它会忽略像素密度。

如果您想要定位高分辨率设备，而不触发屏幕（将其限制为像素密集屏幕），您还可以尝试this。不确定它是否适用于HTML电子邮件，所以让我知道它是怎么回事。

@media查询不起作用

2 个答案: