android - iphone 上三星邮件和 Gmail 应用程序上的媒体查询问题
问题描述
我在使用三星邮件似乎忽略媒体查询的电子邮件模板时遇到问题。它只显示桌面版本。当我在 EOA 上测试时，这不会发生在其他任何地方。对于 iPhone 中的 Gmail 应用程序，它确实显示了移动版本，但它没有居中并且有左边距。我错过了什么？
预期的：
三星：
邮箱：
代码设置：
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http://www.w3c.org/tr/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }
</style>
<![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="x-apple-disable-message-reformatting">
<style type="text/css">
body {width: 100% !important; min-width:100%; -webkit-text-size-adjust: 100%; max-width: 600px; padding: 0; -ms-text-size-adjust:100%; font-family: Arial, Helvetica, sans-serif !important; -webkit-font-smoothing: antialiased; }
/* gmail fixes */
*[class="gmail-fix"] {display: none !important;}
.gmailfix {
display: none !important;
}
.ii a[href] {
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
h1, h2 { font-weight: inherit !important; font-family: Arial, Helvetica, sans-serif!important;}
th { font-weight: normal !important; }
/* /gmail fixes */
/* IOS fixes begin */
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;
}
span [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;
}
/* /IOS fixes */
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
table tr td {mso-line-height-rule: exactly;}
.c_4e4e4e { color:#4e4e4e !important;}
.c_959594 { color:#959594 !important;}
.c_ffffff { color:#ffffff !important;}
.c_727272 { color:#727272 !important;}
.c_007cab { color:#007cab !important;}
/* hover */
a.btn:focus, a.btn:hover {
background-color: #e7e7e7 !important;
background-color: rgba(231, 231, 231, 1) !important;
color: #00aeef !important;
}
.hover_underline:focus, .hover_underline:hover { text-decoration: underline !important; }
/* end hover */
@media only screen and (max-device-width: 600px) {
body {
background-color: #ffffff !important;
width: auto !important;
}
.wrapper {
width: 100% !important;
}
.container_module, .fullwidth {
width: 100% !important;
}
.content_17 { width: 17px !important;}
.content_20 { width: 20px !important;}
.content_36 { width: 36px !important;}
.content_56 { width: 56px !important;}
.content_270 { width: 270px !important;}
.img_42, .img_42 img {
width: 42px !important;
height: auto !important;}
.img_36, .img_36 img {
width: 36px !important;
height: auto !important;}
.img_33, .img_33 img {
width: 33px !important;
height: auto !important;}
.text_12 {font-size: 12px !important;
line-height: 14px !important;}
.text_14 {font-size: 14px !important;
line-height: 16px !important;}
.text_18 {font-size: 18px !important;
line-height: 20px !important;}
.text_18_25 {font-size: 18px !important;
line-height: 25px !important;}
.padding_top_0 {
padding-top: 0px !important;}
.padding_top_7 {
padding-top: 7px !important;}
.padding_top_12 {
padding-top: 12px !important;}
.padding_top_15 {
padding-top: 15px !important;}
.padding_top_17 {
padding-top: 17px !important;}
.padding_top_20 {
padding-top: 20px !important;}
.padding_bottom_15 {
padding-bottom: 15px !important;}
.padding_bottom_17 {
padding-bottom: 17px !important;}
.padding_bottom_20 {
padding-bottom: 20px !important;}
.padding_bottom_25 {
padding-bottom: 25px !important;}
.padding_bottom_35 {
padding-bottom: 35px !important;}
.padding_bottom_45 {
padding-bottom: 45px !important;}
.padding_left_0 {padding-left: 0 !important;}
.padding_left_17 {padding-left: 17px !important;}
.padding_left_20 {padding-left: 20px !important;}
.padding_left_35 {padding-left:35px !important;}
.padding_left_45 {padding-left:45px !important;}
.padding_right_0 {padding-right: 0px !important;}
.padding_right_20 {padding-right: 20px !important;}
.padding_right_25 {padding-right: 25px !important;}
.padding_right_35 {padding-right: 35px !important;}
.padding_right_50 {padding-right: 50px !important;}
.display_block { display: block !important;}
.center { text-align: center !important;}
.show_for_mobile {display: block !important;width: auto !important;overflow: visible !important;max-height: none !important;font-size: inherit !important;line-height: inherit !important;height: auto !important;float: none !important;}
.hide_for_mobile {display: none !important; visibility: hidden !important; width: 0 !important; mso-hide: all !important; overflow: hidden !important;}
}
</style>
</head>
<body bgcolor="#eeeeee" marginheight="0" marginwidth="0" style="-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased; font-family:Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; padding: 0; margin:0; mso-table-lspace:0pt; mso-table-rspace:0pt; width:100% !important; background-color:#eeeeee; background-image:none; -webkit-text-size-adjust: 100%;">
<!-- Email : START -->
<!--[if (gte mso 11)|(IE)]><center>
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tbody>
<tr>
<td width="100%"><![endif]-->
<table role="presentation" cellpadding="0" class="container_module" cellspacing="0" border="0" width="600" bgcolor="#eeeeee" align="center" style="table-layout:fixed;" ><tbody>
<tr>
<td class="container_module" width="600" valign="top" align="center" bgcolor="#ffffff">
<table role="presentation" class="wrapper" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff" align="center" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0px; mso-table-rspace: 0px;"><tbody>
<tr>
<td align="center" width="100%" valign="top" >
<!-- 3 Columns without CTA -->
<table role="presentation" class="container_module" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#ffffff" >
<tbody>
<tr>
<td class="padding_left_20 padding_right_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:20px; color:#00A8EA; -webkit-text-size-adjust:none; padding: 0 24px 15px; margin: 0;">
<div id="threeColumnsNobtnTitle">
<h1 style="font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:20px; color:#00A8EA; margin: 0;"><b>Lorem ipsum</b></h1>
</div>
</td>
</tr>
<tr>
<td class="padding_bottom_20 padding_right_0 padding_left_0" width="100%" align="center" valign="top" style="padding: 0 24px 10px;">
<table role="presentation" class="container_module" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#ffffff" >
<tbody>
<tr>
<!-- Grey box 8 -->
<th class="display_block fullwidth padding_bottom_20 padding_right_0" width="33%" align="left" style="padding: 0 6px 0 0;" valign="top">
<table role="presentation" class="container_module" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#e7e7e7" >
<tbody>
<tr>
<td class="height_auto" width="100%" align="left" height="300" valign="top">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" >
<tbody>
<tr>
<td class="padding_top_20 padding_right_20 padding_left_20" width="100%" align="center" valign="top" style="line-height:0px; font-size:0px; padding: 10px 9px 20px; margin: 0;"><img id="threeColumnsImg4" src="https://via.placeholder.com/280x200" alt="Image1" width="170" style="display:block; width: 100%; height: auto;" border="0" /></td>
</tr>
<tr>
<td class="text_22_31 padding_right_20 padding_left_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#000000; -webkit-text-size-adjust:none; padding: 0 9px 10px; margin: 0;">
<div id="threeColumnsText4"><span class="text_22_31" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#000000;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam</span></div>
</td>
</tr>
<tr>
<td class="text_22_31 padding_right_20 padding_bottom_25 padding_left_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#0041C0; -webkit-text-size-adjust:none; padding: 0 9px 0; margin: 0;">
<div id="box8CTA" ><a class="c_0041C0" href="http://www.linkhere.fakecom" style="color:#0041C0; text-decoration: none;" target="_blank"><span class="text_22_31" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#0041C0; text-decoration: none;">nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
></span></a></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</th>
<!-- Grey box 9 -->
<th class="display_block fullwidth padding_bottom_20 padding_right_0 padding_left_0" width="33%" align="center" style="padding: 0 3px;" valign="top">
<table role="presentation" class="container_module" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#e7e7e7" >
<tbody>
<tr>
<td class="height_auto" width="100%" align="left" height="300" valign="top">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" >
<tbody>
<tr>
<td class="padding_top_20 padding_right_20 padding_left_20" width="100%" align="center" valign="top" style="line-height:0px; font-size:0px; padding: 10px 9px 20px; margin: 0;"><img id="threeColumnsImg5" src="https://via.placeholder.com/280x200" alt="Image2" width="170" style="display:block; width: 100%; height: auto;" border="0" /></td>
</tr>
<tr>
<td class="text_22_31 padding_right_20 padding_left_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#000000; -webkit-text-size-adjust:none; padding: 0 9px 10px; margin: 0;">
<div id="threeColumnsText5"><span class="text_22_31" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#000000;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam</span></div>
</td>
</tr>
<tr>
<td class="text_22_31 padding_right_20 padding_bottom_25 padding_left_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#0041C0; -webkit-text-size-adjust:none; padding: 0 9px 0; margin: 0;">
<div id="box9CTA" ><a class="c_0041C0" href="http://www.linkhere.fakecom" style="color:#0041C0; text-decoration: none;" target="_blank"><span class="text_22_31" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#0041C0; text-decoration: none;">nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
></span></a></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</th>
<!-- Grey box 10 -->
<th class="display_block fullwidth padding_left_0" width="33%" align="right" style="padding: 0 0 0 6px;" valign="top">
<table role="presentation" class="container_module" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#e7e7e7" >
<tbody>
<tr>
<td class="height_auto" width="100%" align="left" height="300" valign="top">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" >
<tbody>
<tr>
<td class="padding_top_20 padding_right_20 padding_left_20" width="100%" align="center" valign="top" style="line-height:0px; font-size:0px; padding: 10px 9px 20px; margin: 0;"><img id="threeColumnsImg6" src="https://via.placeholder.com/280x200" alt="Image3" width="170" style="display:block; width: 100%; height: auto;" border="0" /></td>
</tr>
<tr>
<td class="text_22_31 padding_right_20 padding_left_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#000000; -webkit-text-size-adjust:none; padding: 0 9px 10px; margin: 0;">
<div id="threeColumnsText6" ><span class="text_22_31" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#000000;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam</span></div>
</td>
</tr>
<tr>
<td class="text_22_31 padding_right_20 padding_bottom_25 padding_left_20" width="100%" valign="top" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#0041C0; -webkit-text-size-adjust:none; padding: 0 9px 0; margin: 0;">
<div id="box10CTA"><a class="c_0041C0" href="http://www.linkhere.fakecom" style="color:#0041C0; text-decoration: none;" target="_blank"><span class="text_22_31" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#0041C0; text-decoration: none;">nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
></span></a></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</th>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!-- End 3 Columns without CTA -->
<!-- Content ends -->
<div class="gmail-fix" style="white-space:nowrap; font:15px courier; line-height:0;">
                                                            </div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--[if mso]></td>
</tr>
</tbody></table>
</center><![endif]-->
<!-- Email : END -->
</body>
</html>
解决方案
推荐阅读
- database - powershell 辅助数据提取
- javascript - 删除不在节点列表中工作的类
- java - 反转用户在Java中输入的字符串
- powershell - 通过 powershell 以管理员身份启动 msiexec
- xamarin.forms - 如何将 Rg.Plugins.Popup 用于“SlideDrawer”弹出页面
- azure - 是否可以从 ARM 模板创建 azure 函数并让它从存储在 azure 存储中的 zip 文件中获取代码？
- c# - 带有 Web 浏览器控制问题的 Microsoft Word 2016 VSTO 加载项
- amazon-web-services - 从 lambda 访问 AWS Cloudwatch 事件“附加参数”
- laravel-5 - 发送通知时未使用自定义通知通道
- sql - 带有值oracle sql的where子句中的case语句