隐藏Gmail HTML电子邮件中的内容 - 但显示在手机中？

我正在尝试构建一个响应式HTML电子邮件。我试图做一些相当简单的事情，但陷入困境并开始相信我可能需要以不同的方式来处理它。隐藏Gmail HTML电子邮件中的内容 - 但显示在手机中？

我想显示某些内容，如果用户在移动设备上，并隐藏它，否则。

我第一次尝试看起来像：

在头上的CSS：

@media (max-width: 420px) and (min-width: 100px) { 
    .mobile { 
     display:block !important; 
    } 
}

的HTML：

<div class='mobile' style='display:none;'> 
    I'm only visible on mobile :) 
</div>

这精美的作品对于大多数的邮件客户端，但不会与Gmail这确实不支持'显示：无'没有'！重要'。但是，将重要内容添加到内联样式意味着它不会显示为移动设备。

我已经尝试了几个不同的东西，包括与可见性/不透明度混合（认为这将是一个正确的方向开始，但根本不起作用）并试图通过尝试潜入内联样式：

在头上的CSS：

.mobile { 
    display: none !important; 
} 

@media (max-width: 420px) and (min-width: 100px) { 
    #fix .mobile { 
     display:block !important; 
    } 
}

的HTML：

<div id='fix'> 
    <div class='mobile' style='display:none;'> 
     I'm only visible on mobile :) 
    </div> 
</div>

但是，这也不能工作。看起来这将是一个很常见的问题。

任何想法如何解决这个问题？

来源

2014-12-02 amlyhamm

啊软件开发的美丽：我们得到的只是不断尝试，直到工作的事情！找到了解决办法。似乎有不止一种方式来解决Gmail的内联样式display: none（!important不是唯一的方法）。下面是我工作：

在头上的CSS：

.mobile { 
    display: none; 
    font-size: 0; 
    max-height: 0; 
    line-height: 0; 
    padding: 0; 
} 

@media (max-width: 420px) and (min-width: 100px) { 
    .mobile { 
     display:block !important; 
     line-height: 1.5 !important; 
     max-height: none !important; 
    } 
}

的HTML：

<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'> 
    I'm only visible on mobile :) 
</div>

来源

2014-12-02 21:59:25 amlyhamm

的Gmail条从内联的所有CSS分开 – 2015-09-17 07:14:20

如何使用：

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

来源

2014-12-02 21:55:06 philipb3

隐藏Gmail HTML电子邮件中的内容 - 但显示在手机中？

回答

相关问题