Question

我使用table，tr，td＆s创建了一个电子邮件模板。一切似乎都没问题，除了在Android手机上它没有重新调整大小以适应屏幕..它完美适用于苹果产品..我在网上搜索了一下这个词似乎是android已经禁用了某些响应原因。必须有一种解决方法，因为大多数电子邮件都是在手机上检查的，其中很多都是在Android上。

Answer 1

您是否尝试过将Viewport元标记设置为html模板？

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

我绝对同意设置：

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0; color: #ffffff;">
    ----------------------------------------
</div>

我还建议使用css-inlining工具，例如此http://templates.mailchimp.com/resources/inline-css/（如果您的外部资源尚未代表您这样做），以确保gmail获取样式。

此外，就Gmail中的常规缩放问题而言，我建议在关闭正文元素之前添加以下块（按照此处的建议：http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails/）：

<div flex="100">
   <ul class="list-group">
       <li class="list-group-item cursorPointer" 
        ng-repeat="item in array" ng-click="selectItem(item)">
          {{item.name}}
       </li>
    </ul>
</div>

Answer 3

如果您在Android上谈论Gmail应用程序（这是您将此问题标记为“应用程序”），则应用程序本身不会使用媒体查询或样式标记进行调动，而是会根据您的发现将其删除。确保尽可能内联，以便在电子邮件客户端中获得最佳支持。

有一种方法可以通过使用流体和固定宽度表的组合来调动它。但它不会像素完美。将固定宽度表视为流体表内的块（宽度= 100％）。一旦达到设定的宽度，表格将叠加在一起。这当然适用于任何多列布局。单列是最安全的方法，因为不需要专注于堆叠。不要犹豫使用嵌套在表中嵌套的表中的表。对于我上面提到的使用流体和固定宽度表的方法，对于两列布局，您的外表将是100％宽度，并且该表内的两个固定宽度表是特定宽度并且左右对齐。

可以让它在Gmail应用中看起来不错，但是你必须要问自己有两个概念，你是想要优雅降级还是最低标准？

优雅的降级意味着它在许多电子邮件客户端看起来很棒，并且在gmail应用程序中很不错，或者最低的共同点是单列和围绕它设计。

Answer 4

正如其他一些人所说，Gmail和部分 Android股票电子邮件客户端不支持媒体查询。要覆盖这些客户，您需要混合设计。

混合设计可在不使用媒体查询的情况下实现响应式变形布局。从本质上讲，它使用最大宽度和最小宽度来施加刚性基线（允许一些移动），并为Outlook提供固定的宽宽度，无论如何都要绑定到桌面。一旦设置了适合移动设备的基线，媒体查询就会在支持它的客户端（如iOS Mail）中逐步增强电子邮件。

以下是来自Fabio Carneiro's code samples on GitHub的基本双柱脚手架（全部归功于他！）：

＆＃13;

<!doctype html>
<html>
	<body style="margin:0;">
		<center>
			<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">




				<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
				<tr>
					<td align="center" height="100%" valign="top" width="100%">
						<!--[if mso]>
						<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
						<tr>
						<td align="center" valign="top" width="660">
						<![endif]-->
						<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
							<tr>
								<td align="center" valign="top" style="font-size:0;">
									<!--// DEVELOPER NOTES:
										1. Setting font-size:0; is necessary to ensure
										   that there is no extra spacing introduced
										   between the centering divs that wrap each
										   of the columns. //-->

									<!--[if mso]>
									<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
									<tr>
									<td align="left" valign="top" width="330">
									<![endif]-->
									<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
										<!--// DEVELOPER NOTES:
											1. To have each column center upon stacking,
											   wrap them in individual divs, set the same
											   max-width and width as the table within it,
											   and set display to inline-block; using
											   vertical-align is optional.

											2. Setting min-width determines when the two
											   columns of this block will wrap; in this
											   case, when the total available width is
											   less than or equal to 480px. //-->

										<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
											<tr>
												<td align="center" valign="top">
	
													<!-- // REPLACE WITH BLOCK -->
													<p style="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p>
													<!-- REPLACE WITH BLOCK // -->
	
												</td>
											</tr>
										</table>
									</div>
									<!--[if mso]>
									</td>
									<td align="left" valign="top" width="330">
									<![endif]-->
									<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
										<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
											<tr>
												<td align="center" valign="top">
	
													<!-- // REPLACE WITH BLOCK -->
													<p style="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p>
													<!-- REPLACE WITH BLOCK // -->	
	
												</td>
											</tr>
										</table>
									</div>
									<!--[if mso]>
									</td>
									</tr>
									</table>
									<![endif]-->
								</td>
							</tr>
						</table>
						<!--[if mso]>
						</td>
						</tr>
						</table>
						<![endif]-->
					</td>
				</tr>
				<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->




			</table>
		</center>
	</body>
</html>

＆＃13;

该回购和其他地方有更多的脚手架和模式，但这显示了行动的基本原则。

Answer 5

Android不支持自适应电子邮件，但有一些解决方法。例如，您可以将所有更改为。这将解决问题。它还会使文本在这些单元格中变为粗体，但您可以更改样式以强制它按照您的喜好进行渲染。

如果您在Android上谈论 Gmail ，Gmail应用程序也不支持响应，但您可以强制它呈现为桌面。不幸的是，Gmail没有解决方法，这将是迄今为止唯一的解决方案。

这里一步一步解释： Hot to get a responsive email to work on Android

Android上的Html电子邮件模板无响应

5 个答案: