Question

我已经构建了一个电子邮件，当查看设备宽度减小时，该电子邮件使用媒体查询从2列调整为1。当我通过上传我的代码使用litmus.com进行测试时，电子邮件在Android，iPhone和Windows手机上完美调整！

但是，在我将代码复制到电子邮件服务中的编辑器后，用于发送电子邮件并通过从电子邮件服务向Litmus发送消息再次进行测试后，移动版本没有按预期调整大小。

在第二次测试中查看来源显示我的电子邮件服务删除了样式上方的所有代码，并且仅包含此元标记：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

删除“HandheldFriendly”元标记会导致我的媒体查询失效吗？还有什么东西看起来像这里的问题吗？

这是我的标题代码 -

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="HandheldFriendly" content="True" />

<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body     {width: 100%; background-color: #ffffff; margin:0; 
    padding:0; -webkit-font-smoothing: antialiased;}
html {width: 100%; }
table {border-collapse: collapse;}

@media screen and (max-device-width: 1000px)  {
body[yahoo] .deviceWidth {width:440px!important}    
body[yahoo] .center {text-align: center!important;}  
body[yahoo] .footerLinks { width:32%; margin-bottom:40px}
    }

@media screen and (max-device-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important}    
body[yahoo] .center {text-align: center!important;}  
body[yahoo] .footerLinks { width:32%; margin-bottom:40px}
    }
</style>

</head>

任何帮助都会很棒 - 谢谢!!

更新：这是我查看从我的电子邮件服务发送到我的帐户的测试来源时可以看到的更改的标题代码。

Content-type: text/html;
charset="ISO-8859-1"
Content-transfer-encoding: quoted-printable

<html>
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8">
</head>
<body>
<style type=3D"text/css"><!--
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webki=
    t-font-smoothing: antialiased;}
html {width: 100%; }
table {border-collapse: collapse;}

@media screen and (max-device-width: 1000px)  {
 body[yahoo] .deviceWidth {width:440px!important}   
        body[yahoo] .center {text-align: center!important;} =20
        body[yahoo] .footerLinks { width:32%; margin-bottom:40px}
        }

@media screen and (max-device-width: 479px) {
        body[yahoo] .deviceWidth {width:280px!important}    
        body[yahoo] .center {text-align: center!important;} =20
        body[yahoo] .footerLinks { width:32%; margin-bottom:40px}
        }
--></style>

电子邮件中的媒体查询 - 是否需要某个元标记？

0 个答案: