Newsletter can#39;t hide responsive content on gmail and when I try to forward the e-mail(时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时)
问题描述
我正在尝试撰写时事通讯，但在 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 上的响应内容以及当我尝试转发电子邮件时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本文标题为：时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时
基础教程推荐
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 动态更新多个选择框 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
