1

我构建了一封电子邮件，当查看设备宽度减小时，它使用媒体查询将 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>
4

0 回答 0