Скрытие контента в GMail и Outlook не работает с реализацией Zurb Ink

У меня возникла проблема с использованием функции "Показать / скрыть" для рабочего стола / мобильного устройства с электронной почтой Zurb Ink. Когда я использую CSS ниже, он работает правильно в GMail, где мобильный контент скрыт и отображается только рабочий стол, но не в Outlook. Тем не менее, с чернилами по умолчанию CSS (где нет !important флаг на display: none) это работает в Outlook, но не в GMail. Я использую Outlook 2010.

Я получил вдохновение от этого Gist, и я использую этот CSS:

div.gmail .show-for-small,
div.gmail .hide-for-desktop {
    display : none !important;
    mso-hide: all !important;
}

Это моя электронная разметка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <style type="text/css">
            <!-- my inline styles in here -->
        </style>
    </head>
    <body>
    <!--[if !mso]><!-->
    <div class="gmail">
    <!--<![endif]-->
    <table class="body">...</table>
    <!--[if !mso]><!-->
    </div>
    <!--<![endif]-->
    </body>

Что мне не хватает?

У Zurb есть одна точка останова, и она составляет 600px, поэтому я не хочу ее менять. Чернила CSS, предоставленные Zurb, можно увидеть здесь.

Источник

2 ответа

Решение

Я отправлю ответ сам, так как я в конечном итоге докопался до него (по крайней мере, для поддержки GMail, Mobile iOS и Outlook).

Все еще придерживаясь классов Ink по умолчанию, я изменил классы видимости на:

.show-for-small,
.hide-for-desktop {
    display     : none;
    max-height  : 0;   /* Gmail */
    mso-hide    : all;  /* Outlook clients */
    overflow    : hidden;  /* Generic */
    font-size   : 0 !important;  /* Be careful with this one, only use if absolutely required */
    line-height : 0;
    padding     : 0 !important;
}

и затем в "мобильном" виде на точке останова 600px я сделал это, чтобы по существу обратить вспять изменения, которые я сделал выше:

@media only screen and (max-width : 600px) {
    table[class="body"] .show-for-small,
    table[class="body"] .hide-for-desktop {
        display     : block !important;
        max-height  : 100% !important; /* Gmail */
        mso-hide    : none !important; /* Outlook clients */
        overflow    : visible !important; /* Generic */
        font-size   : 14px !important; /* Be careful with this one, only use if absolutely required */
        line-height : 100% !important;
        height      : 100% !important;
        width       : 100% !important;
    }
}

Я надеюсь, что это поможет кому-то, работающему с Zurb Ink 1 и скрестив пальцы, разобраться с этой проблемой в Foundation for Emails при ее выпуске.

Источник

Я использую это, чтобы скрыть контент только для мобильных устройств в Outlook

<!--[if !mso]><\!-->
Mobile Only Content
<!-- <![endif]-->

Все внутри блока if не отображается в Outlook.

Источник
Другие вопросы по тегам