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应用中显示。

Answer 2

因此，在进一步查看来自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;}

我发现将我的表包装在父div中以及其他一些CSS规则就可以了！

<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应用中显示移动表格。但是，只显示顶部表格（好像我在桌面上查看），所以它对我来说非常合适。

这也是试金石！

Gmail忽略display：none

2 个答案: