css - Gmail 忽略显示 :none

Question

我想做的是根据您正在查看的设备设置两个表，它们要么可见，要么不可见。这是我的媒体查询:

@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 中的一个问题，但我担心其他电子邮件客户端也会遇到这个问题。

Answer 1

遗憾的是，媒体查询在 Gmail 或 Gmail 应用程序中不起作用。您必须选择默认显示哪一个，它也会显示在 Gmail 和 Gmail 应用程序中。