Question

我正在寻找一种基于客户打开电子邮件的设备显示/隐藏电子邮件简报内容的方法。

我目前在头部显示了这段代码：

    @media only screen and (max-width: 480px) {
  #mobile { display: block; }  /* show it on small screens */
#normal { display: none; }   /* hide it elsewhere */
}

@media only screen and (min-width: 481px) {
  #mobile { display: none; }   /* hide it elsewhere */
  #normal { display: block; }  /* show it on large screens */
}

同时：

<div id="mobile">content</div> or <div id="normal">content1<div>

如果我将它用于网络，这可以正常工作，我可以扩展我的浏览器窗口，内容根据窗口的宽度显示/消失，但是一旦我通过我们的电子邮件系统发送测试，它在移动设备上工作正常但在桌面（Gmail）上崩溃。

因为这是一封我不能使用javascript的电子邮件，所以它都需要是html / css。

我做错了什么或丢失了什么？

Answer 1

我感觉到你的痛苦。在html电子邮件简报中显示和隐藏内容多年来一直困扰着我！

/* Hide on Desktop */

.hide-desktop { 
    /* non-gmail */
    display: none; 

    /* gmail */
    font-size: 0; 
    max-height: 0; 
    line-height: 0; 

    /* outlook */
    mso-hide: all;

    /* optional, required only if you're using padding */
    padding: 0; 

}
@media (max-width: 480px) {
    .hide-desktop {
        display: block !important;
        font-size: 12px !important;
        max-height: none !important;
        line-height: 1.5 !important;
    }
}


/* Hide on Mobile */

@media (max-width: 480px) {
    .hide-mobile {
        display: none;
        max-height: 0; 
    }
}

注意：不要忘记内联媒体查询之外的.hide-desktop规则。

因此，使用媒体查询和一些黑客，我们可以做一个看涨隐藏所有桌面，然后撤消媒体查询。相反，由于移动客户端对媒体查询提供了不错的支持，我们可以单独使用媒体查询隐藏移动内容。异常值，gmail，只是获取桌面视图 - 这是不幸的但仍然可用。

如何根据设备制作内容显示/隐藏

1 个答案: