Gmail忽略显示：无

我想要做的是根据您正在查看的设备，有两个可见或不可见的表。这里是我的媒体查询：Gmail忽略显示：无

@media only screen and (max-width: 480px) { 
.hidedesktop { 
    display:table !important; 
    overflow:visible !important; 
    line-height:100% !important; 
    visibility:visible !important;} 

.hide { 
    display:none !important; 
    width:0px !important; 
}

我的第一台正常工作，但我的第二个表不上桌面隐藏

<table class="hide"> 
    <tbody> 
    <tr> 
     <td> Show this on desktop. Hide on mobile. 

     </td> 
    </tr> 
    </tbody> 
</table> 

<table class="hidedesktop" style="overflow:hidden; display:none; line-height:0px; max-height:0px; visibility: hidden;"> 
    <tbody> 
    <tr> 
     <td> Hide on desktop. Show on mobile </td> 
    </tr> 
    </tbody> 
</table>

任何人对此有一个解决？从我所知道的情况来看，这只是gmail中的一个问题，但我担心我会在其他电子邮件客户端遇到此问题。

来源

2016-03-08 cgrouge

您在此行宽中有一个额外的支架：0px！important;} – raven

感谢您的接触，在此处粘贴代码时必然发生。 – cgrouge

据我所知，你不能依赖电子邮件中的样式表。只使用内联样式。检查并重新检查。某些邮件客户端简单地忽略了一些CSS属性。特别是因为他们认为电子邮件是一个你应该比网页更“安全”的地方。因此，加载或运行脚本或其他资源，隐藏电子邮件内容甚至改变链接外观的能力都会受到影响。您最好发送链接到网页，而不是发送响应式电子邮件。 –

因此，在对J.Crew的电子邮件进行了深入研究之后，我试图复制实践，我找到了解决方案。

.hide {display:none !important; width:0px !important;} 

.showme {display:table !important; 
    width:100% !important; 
    overflow:visible !important; 
    float:none !important; 
    max-height:inherit !important; 
    line-height:auto !important; 
    margin-top:0px !important; 
    visibility:inherit !important;} 

.mobilenav { 
    width:100% !important; 
    margin: 0 auto !important;}

我发现，将我的表与其他一些CSS规则一起包装在一个父级div中，实现了诀窍！

<table class="hide"> 
    <tbody> 
    <tr> 
     <td> Show this on desktop. Hide on mobile.</td> 
    </tr> 
    </tbody> 
</table> 

<div class="showme" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; line-height:0px; visibility:hidden;"> 
<table class="mobilenav showme" width="100%" style="display:none;"> 
    <tbody> 
    <tr> 
     <td> Hide on desktop. Show on mobile </td> 
    </tr> 
    </tbody> 
</table> 
</div>

虽然它在gmail桌面上工作，但我无法在gmail应用中显示移动表。但是，只显示顶部表格（就好像我正在桌面上查看一样），所以它对我来说非常合适。

这也是石蕊测试！

来源

2016-03-09 20:01:00 cgrouge

不幸的是，媒体查询在Gmail或Gmail应用中无效。您必须选择默认显示哪一个，并且这也会显示在Gmail和Gmail应用中。

来源

2016-03-09 16:13:41

我看到一个J.Crew电子邮件，它的页脚中只有一个导航栏，只能在移动设备上显示，并且可以将它隐藏在Gmail中。我检查了他们的源代码，我没有看到任何特别的东西。它看起来与我所拥有的非常相似，但我无法复制它。 – cgrouge

Gmail忽略显示：无

回答

相关问题