[英]Newsletter can't hide responsive content on gmail and when I try to forward the e-mail
我正在嘗試撰寫時事通訊,但在GMail上進行測試時,無法隱藏響應內容。 在Outlook和Yahoo上,一切正常,但如果我嘗試轉發電子郵件,則隱藏的內容可見。
我測試使用:
putsmail >我用它在Outlook , Yahoo和GMail上發送測試
1。 Yahoo >看起來還不錯,但是當我嘗試轉發電子郵件時,隱藏的內容是可見的;
2. Outlook >看起來不錯,但是當我嘗試轉發電子郵件時,隱藏的內容是可見的。
3. GMail >隱藏的內容可見。
mailchimp >這對我來說只能在Outlook上進行測試,並且看起來還可以(它隱藏了響應內容),但是當我嘗試轉發電子郵件時,隱藏的內容不再被隱藏。
這是我的代碼()的一部分:
<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>
我被困住了,不知道該怎么辦...歡迎任何想法。 謝謝!
不幸的是,不幸的是,GMail尚不支持媒體查詢,也不支持display
, overflow
或visibility
屬性。
有關更多信息,請參見Campaign Monitor的《電子郵件客戶端CSS支持指南》 。
恐怕除了重寫您的時事通訊以使其完全流暢以外,而不是試圖使其具有響應性,否則,這里沒有真正的解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.