iPhone Mail 在 html 电子邮件中调整图像/div 的大小
Posted
技术标签:
【中文标题】iPhone Mail 在 html 电子邮件中调整图像/div 的大小【英文标题】：iPhone Mail resizing images/div in html email 【发布时间】：2015-11-01 03:48:46 【问题描述】：我正在使用 MadMimi 进行电子邮件促销。到目前为止，我的电子邮件在所有浏览器和设备上看起来都是一致的，包括 iPad 上的 ios（在邮件应用程序中）。但是，iPhone 上的 iOS 上的图像存在一个奇怪的调整大小问题（同样是邮件应用程序）。请参阅下面的 CSS 和屏幕截图。如您所见，图像超出其父元素的宽度。有谁知道为什么会发生这种情况或如何纠正它？谢谢。
CSS：
.outer-wrapper
width: 600px;
max-width: 100%;
margin: 0 auto;
.inner-wrapper
width: 100%;
border-radius: 10px;
overflow: hidden;
background-color: white;
border: 1px solid #dddddd;
img
width: 600px;
max-width: 100%;
height: auto;
html：
<body>
<div class="outer-wrapper">
<div class="browser">Email look weird? Be sure to enable images, or view it on the web <a href="[[web_link]]" target="_blank">here</a>.</div>
<div class="inner-wrapper">
<a href="#"><img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"></a>
<div class="body-wrapper">
[content...]
</div>
</div>
</div>
</body>
【问题讨论】：
【参考方案1】：我通过反复试验找到了答案。我颠倒了.outer-wrappermax-width 和width 的值。正确的 CSS 应该是：
.outer-wrapper
width: 100%;
max-width: 600px;
margin: 0 auto;
我认为正在发生的事情是，当用户在 iPhone 上时，视口中的像素少于 600，因此渲染器将退回到 max-width 以获取 .outer-wrapper。并且由于它设置为 100% 而不是声明的像素值，img 100% 宽度正在回退到视口宽度，而不是其父宽度。所有其他浏览器的视口都大于 600 像素，这是一个声明的像素值，并且不会出现问题（iPad、桌面等）。显然是对我的愚蠢疏忽。
这就是它应该的样子。
【讨论】：
【参考方案2】：由于图像状态为 100%，它将占据整个宽度。如果您希望它与字母的宽度相同，则应将其移动到该 div 标记内。我假设不是因为我看不到 html 代码。
如果您有针对不同设备的特定 css 部分，您可以在此处进行更改。或者另一种选择是仅为此 ios 设备创建一个 css 类并在那里编辑宽度，这样您就不会更改其余的工作设备。
【讨论】：
我添加了 HTML。我知道图像的 100% 宽度会填充它的父级，它不是 body，而是一个 div，它也有一个父级。 为什么不把inner-wrapper 放在body wrapper 里面，这样它就可以占据父母的宽度？或者就像我之前所说的，你可以让 css 类在它位于 ios 设备中时被拾取，这样它就可以为 ios 设备提供不同的宽度。例如@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) width: 80%;跨度> 我没有将内部包装器放在正文包装器中，因为图像是标题图像，并且内容与该图像是分开的。内容中还包含图像。 body wrapper 也会有边距，等等。除此之外，中心问题仍然存在，为什么图像在 iPhone 上的行为不像在其他所有客户端中那样。【参考方案3】：使用表格`
<table>
<tr>
<td>
<div style="width=100%">
...your content
</div>
</td>
</tr>
</table>
`
它对我有用。
【讨论】：
您的 HTML 格式不正确。您已打开报价但尚未关闭。以上是关于iPhone Mail 在 html 电子邮件中调整图像/div 的大小的主要内容，如果未能解决你的问题，请参考以下文章
iphone手机里添加邮件账户账户的LDAP和CardDAV账户如何使用
如何使用 iphone mail-core api 发送附件？
在 wordpress 中使用 wp_mail 发送 HTML 和纯文本电子邮件