时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时 [英] Newsletter can't hide responsive content on gmail and when I try to forward the e-mail

问题描述

我正在尝试撰写时事通讯，但在 GMail 上进行测试时无法隐藏响应式内容.在 Outlook 和 Yahoo 上一切正常，但如果我尝试转发电子邮件，隐藏的内容是可见的.

I am trying to write a newsletter but I am having trouble hiding the responsive contents when I test on GMail. On Outlook and Yahoo everything is ok, but if I try to forward the e-mail the hidden contents are visible.

我测试过:

• putsmail > 我用它在 Outlook 上发送测试，雅虎和GMail
  1.Yahoo > 看起来不错，但是当我尝试转发电子邮件时，隐藏的内容是可见的；
  2.Outlook > 看起来不错，但是当我尝试转发电子邮件时，隐藏的内容是可见的；
  3.GMail > 可见的隐藏内容.
  

• putsmail > I use this to send test on Outlook, Yahoo and GMail
  1 . Yahoo > looks ok, but when I try to forward the e-mail the hidden content it's visible;
  2. Outlook > looks ok, but when I try to forward the e-mail the hidden content it's visible;
  3. GMail > the hidden content it's visible.
  

mailchimp > 这对我来说只能在 Outlook<上进行测试/strong> 看起来不错(它隐藏了响应内容)，但是当我尝试转发电子邮件时，隐藏的内容不再隐藏.

mailchimp > this works for me to make tests only on Outlook and it looks ok (it hides the responsive content), but when I try to forward the e-mail the hidden contents are not hidden anymore.

这是我的代码()的一部分:

This is a part of my code () :

            <table align="center" style="width:80%;margin-left:10%;margin-right:10%;/*border: 1px solid #FF69B4;*/">
                <tbody>

                   <tr>
                        <td align="center" style="padding: 0 10%; width: 100%;">
                           <span class="vizualizati-aici-normal" style="font-family: Arial;font-size: 12px;color:#666;">
                               <a href="#" style="color:#666;">click here</a>.
                           </span>
                           <span class="vizualizati-aici-tableta" style="font-family: Arial;font-size: 11px;color:#666; display: none;visibility: hidden;height: 0;overflow: hidden;">
                               <a href="#" style="color:#666;">click here</a>.
                           </span>
                           <span class="vizualizati-aici-mobil" style="font-family: Arial;font-size: 10px;color:#666; display: none;visibility: hidden;height: 0;overflow: hidden;">
                                <a href="#" style="color:#666;">click here</a>.
                           </span>
                       </td>
                   </tr>

                   <tr>
                       <td align="center" style="padding: 0 10%; width: 100%;" class="header-hr-newsletter">
                           <h1 style="font-family: 'EB Garamond', serif;font-size: 80px;font-weight: 400;color:#000;padding:0;margin:0;">
                                Newsletter
                           </h1>
                            <h2 style="font-family: 'EB Garamond', serif;font-size: 60px;font-weight: 400;color:#000;padding:20px 0;margin:0;display: none;visibility: hidden;height: 0;overflow: hidden;">
                                 Newsletter
                           </h2>
                           <h3 style="font-family: 'EB Garamond', serif;font-size: 40px;font-weight: 400;color:#000;padding:20px 0;margin:0;display: none;visibility: hidden;height: 0;overflow: hidden;">
                                 Newsletter
                           </h3>
                       </td>
                   </tr>

                    <tr>
                        <td align="center" style="width:100%;background-color: #cc66ff;width: 100%; padding: 0 10%;" class="header-with-number-and-logo">
                           <table style="margin:0;padding:0; width:100%; padding:10px 5px;">
                                <tbody>
                                   <tr>
                                       <td style="width:50%;color:#FFF;text-align: left;padding-right: 10%;font-family: Arial;">
                                            <span class="nr-revista-normal" style="font-size: 25px;">Nr.: x, yy zzz</span>
                                            <span class="nr-revista-tableta" style="font-size: 18px;display: none;visibility: hidden;height: 0;overflow: hidden;">Nr.: x, yy zzz</span>
                                            <span class="nr-revista-mobil" style="font-size: 13px;display: none;visibility: hidden;height: 0;overflow: hidden;">Nr.: x, yy zzz</span>
                                       </td>

                                       <td align="right" style="width:50%;padding-left: 10%;">
                                            <span class="header-normal-screen-logo" style="color: #FFF;font-size: 25px;">
                                             Some Logo
                                            </span>
                                            <span class="header-tablet-logo" style="display: none;visibility: hidden;height: 0;overflow: hidden;color:#FFF;font-size: 18px;">
                                             Some Logo
                                            </span>
                                            <span  class="header-mobil-logo" style="display: none;visibility: hidden;height: 0;overflow: hidden;color:#FFF;font-size: 18px;">
                                             Some Logo
                                            </span>
                                       </td>
                                   </tr>
                               </tbody>
                           </table>
                        </td>
                    </tr>

                </tbody>
            </table>

            <style>

                @media only screen and (max-width: 768px) and (min-width: 479px){

                    body{
                        /*background-color: #FFFF45;*/
                    }

                    /* click here */
                    .vizualizati-aici-normal{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;

                    }
                    .vizualizati-aici-tableta{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;
                    }

                    /*newsletter title*/
                    .header-hr-newsletter h1{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .header-hr-newsletter h2{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;
                    }

                    /*number*/
                    .nr-revista-normal{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .nr-revista-tableta{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }
                    /*logo*/

                    .header-normal-screen-logo{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .header-tablet-logo{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }

                }

                @media only screen and (max-width: 480px) {

                    body{
                        /*background-color: #00EE33;*/
                    }

                    /* click here */
                    .vizualizati-aici-normal{
                        display: none!important;
                        height: none!important;
                        visibility: hidden!important;
                        overflow: hidden!important;

                    }
                   .vizualizati-aici-tableta{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .vizualizati-aici-mobil{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;

                    }

                    /*newsletter title*/
                    .header-hr-newsletter h1{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .header-hr-newsletter h2{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .header-hr-newsletter h3{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;
                    }

                    /*number*/
                    .nr-revista-normal{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .nr-revista-tableta{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .nr-revista-mobil{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }

                    /*logo*/
                    .header-normal-screen-logo{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .header-tablet-logo{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .header-mobil-logo{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }    

               }

            </style>

我被卡住了，不知道该怎么办...任何想法都欢迎.谢谢！

I am stuck, don't know what to do ... Any idea it's welcome. Thank you!

推荐答案

这里的坏消息是，不幸的是，GMail 还不支持媒体查询，也不支持 display、溢出 或可见性 属性.

The bad news here is that, unfortunately, GMail does not yet support media queries nor does it support the display, overflow or visibility properties.

有关详细信息，请参阅 Campaign Monitor 的电子邮件客户端 CSS 支持指南.

See Campaign Monitor's CSS Support Guide for Email Clients for more information.

除了重写您的时事通讯以使其完全流畅，而不是试图使其响应，恐怕这里没有真正的解决方案.

Other than rewriting your newsletter to be completely fluid, rather than trying to make it responsive, I'm afraid there's no real solution to be had here.

这篇关于时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！