Html Gmail忽略媒体查询创建仅限移动的div

我试图使

仅在手机上可见

在

标记内，我有：

<style>

@media only screen and (min-device-width: 481px) {
  div[class="mobile-only"] { 
    height: 0px !important;
    overflow: hidden !important;  
  } 
}

@media only screen and (max-device-width: 480px) {
  div[class="mobile-only"] { 
    height: auto !important;
    overflow: auto !important;
}

</style>

@仅介质屏幕和（最小设备宽度：481px）{
div[class=“仅限移动设备”]{
高度：0px！重要；
溢出：隐藏！重要；
} 
}
@仅介质屏幕和（最大设备宽度：480px）{
div[class=“仅限移动设备”]{
高度：自动！重要；
溢出：自动！重要；
}

在HTML中：

<div class="mobile-only">
  <table...>
</div>

我尝试了无数（大致）不同的方法来实现这一点，比如

显示：无；

，但GMail似乎完全忽略了媒体查询，不管怎样都显示

---

有什么诀窍吗？它在我的Outlook客户端中有效。

您可以尝试以下方法：

HTML:

正如在html电子邮件中的链接回答样式中提到的，应该设置为内联。

也许这会有所帮助

<div class="mobile-only" style="overflow:hidden; float:left; display:none; line-height:0px;"><br/>This is hidden on desktop!</div>

@media only screen and (max-device-width: 480px) {
  *[class="mobile-only"] {
    overflow: visible !important;
    float: none !important;
    display: block !important;
    line-height:100% !important;
  }
}