1

我正在为我的公司制作电子邮件模板。取决于它是移动设备还是浏览器，我正在尝试显示内容。

显示属性似乎不适用于 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 应用程序。任何指针？

4

2 回答 2

2

正确，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

于 2012-08-14T20:57:51.590 回答
0

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

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

CS 样式应保持在最低限度，并且仅用作内联样式。

于 2012-07-25T22:36:15.850 回答