@media queries does not working

<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上测试时根本不起作用。我究竟做错了什么？@media queries does not working

感谢，吉姆

来源

2014-01-26 Jimbly2

iPhone版本？为什么你没有'table'的'td'标签？ –

嗨 - 这是一个iPhone 5 - 我刚刚提取了我申请该课程的元素，它有一个表格。 – Jimbly2

我没有设备可以测试，但只需使用'max-width'代替...？ [基本示例在这里]（http://jsfiddle.net/SinisterSystems/82YS3/） –

尝试导入媒体=“屏幕”

<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) {

也可以尝试的最大宽度，而不是最大的设备宽度看到在您的PC的结果

让我知道它是否有效

来源

2014-01-26 19:10:49 KhaledMohamedP

你好 - 感谢输入，但可悲的是没有改变 - 如果我拖动窗口变小，甚至不会在浏览器中缩放。 – Jimbly2

但我刚刚注意到，在Dreamweaver预览窗口中，如果我将窗口拖动得更小，它的确会缩放... – Jimbly2

我很高兴它可以适合您...好运 – KhaledMohamedP

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

此外，max-width比max-device-width更好，因为我相信它会忽略像素密度。

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

来源

2014-02-03 15:47:52 John

嗨John - 仍然不起作用不幸的是，但感谢这个想法。 – Jimbly2

尝试丢失媒体查询声明中的[[class =“”]'并查看它是否有效。这将有助于查明原因。任何媒体查询都可以工作吗？另外，您是否使用公司电子邮件地址？有时企业过滤器可以剥离它们。 – John

嗨约翰 - 实际上工作，但只在浏览器中。如果我拖动浏览器窗口变小 - 但它在电子邮件中不起作用！ – Jimbly2

@media queries does not working

回答

相关问题