隐藏 GMail 和 Outlook 中的内容不适用于 Zurb Ink 实施
Hiding content in GMail and Outlook not working with Zurb Ink implementation
我在 Zurb Ink email framework 中使用 Desktop/Mobile show/hide 功能时遇到问题。当我使用下面的 CSS 时,它在 GMail 中正常工作,移动内容被隐藏并且只显示桌面,但在 Outlook 中 不是 。但是,使用默认 Ink CSS(display: none
上没有 !important
标志)它在 Outlook 中有效,但在 GMail 中不。我正在使用 Outlook 2010。
我从 this 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 有一个断点,在 600 像素处,所以我不想更改它。 Zurb提供的InkCSS可见here.
我会 post 自己回答,因为我最终会深入了解它(至少对于 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;
}
然后在 "mobile" 视图中的 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 和手指交叉 Zurb 的人在 Foundation for Emails 发布时解决这个问题。
我用它来隐藏 outlook 中的仅限移动设备的内容
<!--[if !mso]><\!-->
Mobile Only Content
<!-- <![endif]-->
if 块内的所有内容都不会在 Outlook 中呈现。
我在 Zurb Ink email framework 中使用 Desktop/Mobile show/hide 功能时遇到问题。当我使用下面的 CSS 时,它在 GMail 中正常工作,移动内容被隐藏并且只显示桌面,但在 Outlook 中 不是 。但是,使用默认 Ink CSS(display: none
上没有 !important
标志)它在 Outlook 中有效,但在 GMail 中不。我正在使用 Outlook 2010。
我从 this 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 有一个断点,在 600 像素处,所以我不想更改它。 Zurb提供的InkCSS可见here.
我会 post 自己回答,因为我最终会深入了解它(至少对于 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;
}
然后在 "mobile" 视图中的 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 和手指交叉 Zurb 的人在 Foundation for Emails 发布时解决这个问题。
我用它来隐藏 outlook 中的仅限移动设备的内容
<!--[if !mso]><\!-->
Mobile Only Content
<!-- <![endif]-->
if 块内的所有内容都不会在 Outlook 中呈现。