媒体查询在gmail应用程序中无法正常工作
我创建了一个电子邮件模板。它在浏览器中正常工作， 当我在android中的gmail应用程序中看到相同的设计时，它会改变设计。
我的代码在这里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--<link href="fonts/AmericanTypewriter.ttc?family=AmericanType" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style type="text/css">
/* @font-face {
font-family: AmericanType;
src: url(fonts/AmericanTypewriter.ttc);
}
@font-face {
font-family: ArchitectsDaughter;
src: url(fonts/ArchitectsDaughter.ttf);
}*/
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%;}
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
@media screen and (max-width: 480px) {
.img-max {
width: auto !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 50px 15px;" class="mobile-padding">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="515" class="mobile-wrapper">
<tr>
<td align="center" valign="top" style="font-family: 'Roboto Slab', Open Sans, Helvetica, Arial, sans-serif;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" bgcolor="#ffffff" style="border-radius: 3px 3px 0 0;">
<img src="http://www.kevalam.com/mailform/img/gif-top.gif" alt="insert alt text here" style="display: block; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999;" class="img-max"/>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="border-radius: 0 0 3px 3px; padding: 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="font-family: 'Roboto Slab', Open Sans, Helvetica, Arial, sans-serif;font-weight: 100;">
<p style="font-size: 38px; color: #444444; margin: 0; padding-bottom: 10px;">Release your Stress!!</p>
<p style="font-size: 30px; color: #444444; margin: 0; padding-bottom: 10px;">All Print Design and Digital Solutions</p>
<p style="font-size: 40px; color: #444444; margin: 0; padding-bottom: 10px;">at one stop only</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="border-radius: 3px 3px 0 0;">
<div style="text-align: left; height: 305px; width: 580px; background: #fff url('http://www.kevalam.com/mailform/img/mrNext.png') no-repeat;background-color: #fff; background-image: url('http://www.kevalam.com/mailform/img/mrNext.png');background-repeat: no-repeat;background-position: center;background-size: cover;">
<!--<div style="text-align: left; height: 305px; width: 580px; margin:20px;">-->
<!--<div style="height:0px;">-->
<!--<img src="img/mrNext.png" alt="insert alt text here" style="display: block; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999; margin: 20px;" class="img-max"/>-->
<!--</div>-->
<div style="display:inline-block;margin-left: 80px;margin-top: 80px;">
<p style="font-size: 20px;margin-bottom: 10px;">Release your stress</p>
<a href="http://www.kevalam.com/mailform/" target="_blank" style="font-size: 20px; font-family: 'Roboto Slab', Open Sans, Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none !important; border-radius: 0px; background-color: #85C226; padding: 10px 25px; display: block; outline: none;">Click Here →</a>
</div>
</div>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="padding-bottom: 20px;border-radius: 3px 3px 0 0;">
<p style="display:inline-block;vertical-align: middle; margin-right: 20px;font-size: 20px;">A Union by</p>
<img src="http://www.kevalam.com/mailform/img/aayam_logo.png" alt="insert alt text here" style="display: inline-block;vertical-align: middle;width: 120px; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999;" />
<span style="padding: 0px 10px;vertical-align: middle;display: inline-block;font-size: 40px;"> + </span>
<img src="http://www.kevalam.com/mailform/img/kevalam_logo.png" alt="insert alt text here" style="display: inline-block;vertical-align: middle;width: 120px; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
你可以看到两者的截图
浏览器全屏
浏览器中的小屏幕
1 个答案:
答案 0 :(得分：0)
为您的表格提供最大宽度，并在 PX 中设置其他元素，而不是百分比。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？