Question

我是开发HTML电子邮件的新手，我遇到媒体查询问题。

这就是发生的事情：当我完成电子邮件的开发并调整屏幕大小以检查它是否响应时，它按计划工作并适应任何屏幕大小。但是，在使用MailChimp发送测试电子邮件以查看电子邮件是否实际响应之后，我发现移动应用程序（例如Outlook和Gmail）实际上并未根据屏幕大小调整电子邮件大小。

它们实际上使字体和图像变小，使整个内容像笔记本电脑一样适合

有谁知道为什么会发生这种情况以及如何阻止它？

这是我的head标记：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PROMONOTICIAS</title>

  <style type="text/css">
     /* Client-specific Styles */
     #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */

     body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

     /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
     .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */

     .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */

     #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

     img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}

     a img {border:none;}

     .image_fix {display:block;}

     p {margin: 0px 0px !important;}

     table td {border-collapse: collapse;}

     table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

     /*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
     /*STYLES*/
     table[class=full] { width: 100%; clear: both; }

     /*################################################*/
     /*IPAD STYLES*/
     /*################################################*/

     @media only screen and (max-width: 640px) {
     a[href^="tel"], a[href^="sms"] {
     text-decoration: none;
     color: #ffffff; /* or whatever your want */
     pointer-events: none;
     cursor: default;
     }
     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
     text-decoration: default;
     color: #ffffff !important;
     pointer-events: auto;
     cursor: default;
     }
     table[class=devicewidth] {width: 440px!important;text-align:center!important;}
     table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
     table[class="sthide"]{display: none!important;}
     img[class="bigimage"]{width: 420px!important;height:219px!important;}
     img[class="col2img"]{width: 420px!important;height:258px!important;}
     img[class="image-banner"]{width: 440px!important;height:106px!important;}
     td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}
     td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}
     img[class="logo"]{padding:0!important;margin: 0 auto !important;}

     }
     /*##############################################*/
     /*IPHONE STYLES*/
     /*##############################################*/
     @media only screen and (max-width: 480px) {
     a[href^="tel"], a[href^="sms"] {
     text-decoration: none;
     color: #ffffff; /* or whatever your want */
     pointer-events: none;
     cursor: default;
     }
     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
     text-decoration: default;
     color: #ffffff !important; 
     pointer-events: auto;
     cursor: default;
     }
     td[class="mobile-title"]{font-size: 15px !important;}
     a[class="mobile-text"]{font-size: 16px !important;}
     td[class="mobile-disclaimer"]{font-size: 13px !important;}
     table[class=devicewidth] {width: 320px !important;text-align:center!important;}
     table[class=devicewidthinner] {width: 300px !important;text-align:center!important;}
     table[class="sthide"]{display: none!important;}
     img[class="bigimage"]{width: 300px !important;height:136px!important;}
     img[class="col2img"]{width: 300px !important;height:160px!important;}
     img[class="image-banner"]{width: 320px !important;height:68px!important;}

     }
  </style>

Answer 1

发送HTML电子邮件可能非常烦人，因为大多数客户端应用程序不支持所有CSS属性，有些甚至会切断<head>。感觉有点像在1995年创建一个网页。我认为媒体查询在大多数情况下都不会起作用，因为它们只是被切断了！你必须使用内联CSS（叹息！）来响应它。我知道，这不是很酷，但它是创建HTML邮件的最佳方式，它与大多数客户端兼容。您可能需要查看此页面以获取小概述，可以使用的内容以及可能不适用的内容：

https://www.campaignmonitor.com/css/

Html电子邮件无法在移动设备

1 个答案: