5
Tôi đã tạo mẫu e-mail html được cho là đáp ứng. Nó hiển thị hoàn hảo trên các ứng dụng email và điện thoại di động khác nhau. Nhưng trên Outlook nó gots kéo dài đến 100%, đó là hoàn toàn không mát mẻ, vì tiêu đề là 600px rộng.Email html đáp ứng: outlook
Tôi biết Outlook không hỗ trợ thuộc tính max-width. Nhưng chỉ sử dụng width làm cho trình duyệt di động hiển thị sai.
Câu hỏi của tôi rất nghiêm túc là: Tôi nên làm gì/thay đổi mẫu để làm cho nó đáp ứng và vẫn hiển thị ở độ rộng tối đa 600px?
Đây là mã. Đầu tiên với css bổ sung (nên tốt hơn để đọc), thứ hai với css nội tuyến (nên được sử dụng khi gửi email). Đã sử dụng http://beaker.mailchimp.com/inline-css để hiển thị nội tuyến.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
background:#F4F3F4;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
line-height: 1.1; margin-bottom:15px; color:#000;
font-family:Arial, Verdana, "Times New Roman";
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
padding:0!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:0 5px 5px 5px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
background:#FFF;
border: solid 1px #d9d9d9;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#F4F3F4">
<div class="content">
<p style="color:#666; margin:0; padding:0; font-size:10px;"><a href="{email_url}" style="color:#666; margin:0; padding:0;">Klik hier</a> om deze e-mail online te bekijken.</p>
<table bgcolor="#FFFFFF" style="text-align:left;">
<tr>
<td>
<p><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" /></p>
<!-- Callout Panel -->
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
<?php } else { ?>
<table cellpadding="5" style="padding: 15px;">
<?php foreach ($posts as $post) { setup_postdata($post); ?>
<tr>
<td><a href="<?php echo get_permalink(); ?>"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image"></a></td>
<td valign="top">
<a href="<?php echo get_permalink(); ?>"><h3><?php the_title(); ?></h3></a></td>
</tr>
<?php } ?>
</table>
<?php } ?>
<br/>
<br/>
</td>
</tr>
<tr style="margin:0 15px;">
<td align="center" style="border-top: solid 1px #d9d9d9; padding:5px 0;" >
<p>
<a href="http://twitter.com/Topografie">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas">Facebook</a> |
<a href="{unsubscription_url}">Geen nieuws e-mails meer ontvangen</a>
</p>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
Inline CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<head style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</head>
<body style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;background: #F4F3F4;width: 100%;">
<table class="body-wrap" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
<td class="container" bgcolor="#F4F3F4" style="margin: 0 auto;padding: 0;font-family: Arial, Verdana, "Times New Roman";display: block;max-width: 600px;clear: both;">
<div class="content" style="margin: 0 auto;padding: 0 5px 5px 5px;font-family: Arial, Verdana, "Times New Roman";max-width: 600px;display: block;">
<p style="color: #666;margin: 0;padding: 0;font-size: 10px;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><a href="{email_url}" style="color: #666;margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">Klik hier</a> om deze e-mail online te bekijken.</p>
<table bgcolor="#FFFFFF" style="text-align: left;margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></p>
<!-- Callout Panel -->
<p class="callout" style="margin: 0;padding: 15px;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 15px;font-weight: normal;font-size: 14px;line-height: 1.6;background-color: #ECF8FF;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;font-weight: bold;">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
<?php } else { ?>
<table cellpadding="5" style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<?php foreach ($posts as $post) { setup_postdata($post); ?>
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"><a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></a></td>
<td valign="top" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><h3 style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 27px;"><?php the_title(); ?></h3></a></td>
</tr>
<?php } ?>
</table>
<?php } ?>
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</td>
</tr>
<tr style="margin: 0 15px;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td align="center" style="border-top: solid 1px #d9d9d9;padding: 5px 0;margin: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">
<a href="http://twitter.com/Topografie" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Facebook</a> |
<a href="{unsubscription_url}" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Geen nieuws e-mails meer ontvangen</a>
</p>
</td>
</tr>
</table>
</div>
</td>
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
Am Tôi giải thích này một cách chính xác, trong đó bạn đặt CSS nội tuyến đáp ứng của bạn? Mã phản hồi của bạn sẽ xuất hiện trong truy vấn phương tiện phụ thuộc vào kích thước màn hình trong tiêu đề của bạn cho email. – samanthasquared
http://stackoverflow.com/a/23346010/1922144 – davidcondrey