英文:
Hide Content In Mobile E-mail Doesn't Work For Gmail
问题
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
英文:
i am testing to hide content for mobile mails.
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
This @media query worked for mobile Outlook but i am not able to hide content for mobile Gmail.
Is it possible?
Here's my test code trying to hide particular <tr> :
<!doctype html>
<html>
<head>
<title>Denizbank</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 100%;">
<table width="789" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="white">
<tr>
<td style="line-height: 1px; font-size: 1px" colspan="3">
<img style="display:block; border:0;" src="https://www.denizbank.com/mailing/avukat_ust_240323_01.jpg" width="789" height="108" alt=""></td>
</tr>
<tr class="hide-on-mobile">
<td style="line-height: 1px; font-size: 1px">
<img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_02.jpg" width="46" height="301" alt=""></td>
<td width="701" height="301" bgcolor="#364F64" align="center" >
<p style="margin: 0 !important; padding: 0px 50px 15px 50px; display: inline-block !important; font-family: Helvetica, Arial, sans-serif; font-size: 35px !important; line-height: 130% !important; color: #ffffff; font-weight: bold !important;">
Nakit İhtiyaçlarınız için Hızlı Çözüm Afili Bankacılık’ta!
</p>
</td>
<td style="line-height: 1px; font-size: 1px">
<img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_04.jpg" width="42" height="301" alt=""></td>
</tr>
I've tried to hide the <tr> for mobile.
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
Than i've tried to give;
<tr style="display: none;">
than override it with;
@media only screen and (min-width: 601px) {
tr[style*="display: none;"] {
display: table-row !important;
}
}
But the non-displayed content didn't come back on desktop mails.
答案1
得分: 0
有几个问题需要注意。有些版本的Gmail不允许<style>块，并会将其删除。因此，我通常认为以移动设备为首要考虑更安全。
然而，你的移动设备优先代码使用了一种更高级的选择方式，许多电子邮件客户端无法处理：tr[style*="display: none;"]
如果你使用之前的类的方法，应该可以工作。
例如：
<tr class="showOnDesktop" style="display: none; mso-hide: none;">
@media only screen and (min-width: 601px) {
.showOnDesktop {
display: table-row !important;
}
}
我还为Outlook Windows桌面添加了mso-hide:none。
如果这不起作用，尝试将其应用于display:block !important的<div>元素。这是我通常使用的方法。
英文:
There's a couple of things going on here. Some versions of Gmail don't allow <style> blocks and will remove it. So I normally find it safer to go mobile first.
However, your mobile first code uses a more advanced way of selecting that many email clients can't cope with: tr[style*="display: none;"]
If you use your earlier method of a class, that should work.
I.e.
<tr class="showOnDesktop" style="display: none;mso-hide:none;">
@media only screen and (min-width: 601px) {
.showOnDesktop {
display: table-row !important;
}
}
I've also added mso-hide:none for Outlook Windows desktop.
If that doesn't work, try it on a div with display:block !important. That's what I normally use.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论