1
我目前正在通過Mailchimp爲我的客戶/我的博客追隨者發佈新聞稿，並且出現了一個問題。當電子郵件發送給任何使用默認iPhone電子郵件客戶端的人時，圖像會出現歪斜，如this。Apple Mail上的此電子郵件中的CSS出現問題
我在一個單獨的iOS客戶端（Airmail）上檢查了電子郵件，它看起來很好。它在Mailchimp的預覽中也很好看，所以我猜這與蘋果的默認客戶端有關。有任何想法嗎？
這裏的HTML和內嵌CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/files/1e71bcad-6a84-4265-bb54-84188d0d027f/email1sheet.04.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="ult">
<div class="header">
<img src="https://gallery.mailchimp.com/70186f0a9db1e3d7b932ad84d/images/0a53d223-c847-49f6-97c3-2119430d3dce.png" alt="colorful banner" style="max-width: 100%">
</div>
<div class="body-div">
<p>Hi and welcome to my email list! Thanks for joining. This is just a simple welcome email, but let me tell you a little bit about myself. My name is Mason and I'm a graphic designer from Chicago, IL. I love good music, coffee, video games and, of course, design.
<br>
<br>
I’d like to thank you for joining by sharing some content that I think you might enjoy:</p>
<h1>Some Cool Resources</h1>
<p><b>Looking For Stock Photos?</b>
<br>Stock photos are expensive, for sure. I get it. I don’t want to pay for them either. Well, it turns out we’re all in luck. <a href="https://stocksnap.io">Stocksnap</a> is a great site that gives away a ton of high quality, high-res images for free. The pictures here are actually really good. Even as a designer, I’ll admit that I use some of them myself. Check the site out! No need to thank me.</p>
<br>
<p><b>Want To See Some Cool Design Work?</b>
<br>Try browsing <a href="https://dribbble.com">Dribbble</a> sometime. It’s a great site where you can see some very high quality work. Only users who have been invited to the site are allowed to post their work, so all the posts are guaranteed to be somewhat good, at the very least.<br><br>
If you want, give me a follow too! My Dribbble page is <a href="https://dribbble.com/MasonW">here</a>.</p>
<br>
<p><b>Need a New Podcast?</b>
<br>If you haven’t listened to <a href="http://99percentinvisible.org">99% Invisible</a> yet, you definitely need to check it out. This podcast is all about the various kinds of design we come across in life. It’ll help you look at the things you take for granted in life in a whole new way. Each episode is incredibly interesting in its own way. Also, the host, Roman Mars, exudes real passion and has one of the most relaxing voices of any podcast host I know. What’s more… episodes are usually only around 20 - 30 minutes long which is often times the perfect length for your commute to work or for a nice walk.</p>
<h1>Content From Yours Truly</h1>
<p>Thinking of working with a designer sometime soon? Check out a recent blog post of mine where I talk about the The Do’s and Don’ts of Working With a Designer. Design can be a misunderstood field and hopefully this will give you a bit of insight.</p>
<br>
<center>
<div class="pic">
<a href="https://medium.com/@mason_weis/the-dos-and-donts-of-working-with-a-designer-on-your-next-project-9f322a53b8e"><img src="https://cdn-images-1.medium.com/max/1000/1*x_BVDlaWwsD0V5PdthkkkA.png" alt="Cover Art and link for my blog post" style="border-top-right-radius: 5px; border-top-left-radius: 5px; max-width: 100%; max-height: 100%; display: block;"></a>
<div class="card">Click above to give it a read!</div>
</div>
</center>
<br>
<h1>Until Next Time!</h1>
<p>Thanks again for subscribing! I’ll only be sending emails once a month, so don’t expect spam or anything like that. Feel free to reach out to me any time as well - my email is [email protected]
Thanks!
<center>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br>
<a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></p>
</div>
</div>
</body>
</html>
跨多個視圖調整圖像總是很痛苦。如果我是你，我會結合文本和圖像來製作一張圖片並使用它。 –
總是做寬度100％和高度自動或高度100％和寬度自動，因此圖像是成比例的。 – Syfer