html - CSS 块不适用于移动版 Gmail 应用程序
问题描述
当我使用 Gmail 应用程序(移动)查看电子邮件时,我遇到了这个问题:
- 除了 Gmail 应用程序之外,所有电子邮件客户端上的表格列都在移动设备上堆叠
我注意到这些样式在 google 上不起作用,但如果我使用内联(例如 style="background-color:red")放置 CSS,它就可以工作。
我看到很多文章说这不适用于 gmail,但另一种说法是如果你把它放在标签中就可以了。
主要布局:
@using Sitecore.Mvc.Analytics.Extensions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<!-- Used for storing title of the email -->
@Html.Sitecore().Field("Subject")
</title>
<!-- The VisitorIdentification control ensures that people viewing this page with a traditional web browser will be classified as humans not bots. This control is not required if people only view messages using Email clients -->
@Html.Sitecore().VisitorIdentification()
@if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<link href="~/Assets/5-Components.min.css" rel="stylesheet" />
}
<style type="text/css">
body {
margin: 0px !important;
padding: 0px !important;
}
.wrapper > tbody > tr > td {
box-sizing: border-box;
}
@@media only screen and (max-width:720px) {
.wrapper {
width: 90% !important;
margin: auto;
}
.templateColumnContainer {
display: block !important;
/* padding: 0 !important; */
width: 100% !important;
}
.marginBtm {
margin-bottom: 0px;
}
.footerLeft {
border-right: 5px #c2c2c2 solid;
border-bottom: 0px #c2c2c2 solid !important;
}
.footerRight {
border-left: 5px #c2c2c2 solid;
border-top: 0px #c2c2c2 solid !important;
}
}
</style>
</head>
<body style="min-height: 97vh; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box" class="@((Sitecore.Context.PageMode.IsExperienceEditorEditing) ? "edit-mode" : string.Empty)">
<div style="min-height: 97vh; margin:0; padding-top: 16px; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box">
<center>
@Html.Sitecore().Placeholder("mail-body")
</center>
</div>
</body>
</html>
组件占位符:
@model XX.Project.EXM.Models.ColumnComponent
<table width="600" cellpadding="0" cellspacing="0" class="wrapper">
<tbody>
<tr>
<td width="50%" class="templateColumnContainer marginBtm" style="background-color: @Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: @Model.getFormattedPaddingDistance(); color:@Model.TextColor;">
@Html.Sitecore().DynamicPlaceholder("mail-left-double-column")
</td>
<td width="50%" class="templateColumnContainer" style="background-color: @Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: @Model.getFormattedPaddingDistance(); color:@Model.TextColor;">
@Html.Sitecore().DynamicPlaceholder("mail-right-double-column")
</td>
</tr>
</tbody>
</table>
解决方案
当 GMail 在你的 CSS 中遇到错误时,它会<style>
从头部删除整个块。
@
您的媒体查询前面有 2 个符号。
@@media only screen and (max-width:720px) {
推荐阅读
- javascript - 在javascript中遍历嵌套对象数组时的奇怪行为?
- java - 生成 java 类到 src 不仅要使用 maven cxf-codegen-plugin
- java - Grails:Excel 导出 .xlsx 样式问题,打开文件时出现错误消息
- sql-server - 有没有办法创建从 Azure SQL 数据库到 PostgreSQL 的链接服务器?
- python - Tornado 模板调用包括使用变量
- docker - 如何安全地从 GitLab Runner KubernetesExecutor pod 推送到私有容器注册表?
- android - 安装android SDK和下载命令行工具后找不到monkeyrunner文件
- typescript - 来自打字稿的角度更改管道参数
- javascript - 如何将带有悬停文本框的圆圈添加到 d3.js 多线图表?
- python-3.x - python2和python3在制作应用程序时冲突