Question

我正在为我的公司制作电子邮件模板。取决于我是手机还是浏览器，我试图显示内容。

显示属性似乎不适用于gmail，我无法在此处粘贴整个代码。这是我使用的媒体查询。

  @media only screen and (max-device-width: 380px) {
    .mobileWidth {
      width: 290px !important; 
    }

    img { 
    max-width: 130px !important;
    max-height: 130px !important;
    }   

    .right {
      width: 100% !important;         
      position: relative !important;
    }       

     .test {
       width: 290px !important;
       text-align: center !important;
     }

     .showMobile {
       display:inline !important;
     }

    .hideMobile {
      display: none;
    }           
  } 

<html>
  <body>
    <!-- this div block is intended to by default not show in the browser and show in the mobile -->
    <table>
      <tr>
        <td>
          <div class = "showMobile" style ="display:none;">
            <p> some text and image <p>
          </div>

          <!-- this div block is intended to be shown in the browser and not shown in the mobile -->

          <div class="hideMobile">
            <p> some other text and image </p>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

这在iphone邮件帐户中运行良好，但不适用于gmail浏览器，也不适用于iphone的gmail应用程序。有什么指针吗？

Answer 1

正确，display:none将在Gmail中被删除。解决此问题的最佳方法是使用内联样式设置为float:left, width:0px, height:0px, visibility:none, overflow:hidden。当您满足媒体查询的要求时，您还原所有这些样式，因此在媒体查询中，您可以设置float:none !important, overflow:visible !important, width:(actual width or 100%) !important, height:(same as width) !important

Answer 2

对于HTML电子邮件，建议您不要以您的方式使用css样式。

您应该使用旧的学校表格布局和较旧（但仍然有效）的html标签等。

CS样式应保持最小，仅用作内联样式。

html中的display标签不适用于html电子邮件模板

2 个答案: