我根据手册中的代码设置了一个简单的2列（在桌面屏幕上）HTML电子邮件（我之前做过的课程）。当我测试电子邮件时，我发现它在Android手机上正确显示（2列显示器根据需要变为1列显示），但是，在iPhone 5中查看时（尚未试过iPhone 6或更高版本）电子邮件不响应，即2列显示不会改变为单列显示。
请参阅下面的电子邮件代码CSS / HTML。我还在以下位置设置了CodePen： https://codepen.io/Ben10/pen/GvGgZo
我想知道是否有人可以指出CSS / HTML代码的错误（或遗漏）。我该如何解决这个问题呢？我已经在网上查了一下，但我现在比以前更加困惑。 HTML电子邮件似乎是一个问题的雷区。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Night Exclusive Picks Inlined Complete</title>
<style>
@media only screen and (max-width:680px){
/*.wrapper{*/
table[class="wrapper"]{
max-width:680px !important;
width:100% !important;
}
td[class="deviceWidth"]{
display:block !important;
padding:0 !important;
width:100% !important;
}
td[class="row"]{
padding:15px 10px !important;
}
[class="deviceWidth"] p{
font-size:16px !important;
}
a[class="bookLink"]{
font-size:16px !important;
}
/*.resImg{*/
img[class="resImage"]{
height:auto !important;
width:100% !important;
}
/*h1{*/
[class="wrapper"] h1{
font-size:24px !important;
}
[class="wrapper"] h2{
margin-top:15px !important;
}
} /* close media query max-width:680px */
@media only screen and (max-width:480px){
td[class="mobileBanner"]{
background-image:url(http://www.nobledesktop.com/nl-date-
night/img/header-mobile@2x.png) !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
}
[class="mobileBanner"] img{
display:none !important;
}
[class="mobileBanner"] a{
display:block !important;
padding-top:43.333% !important;
}
} /* close media query max-width:480px */
</style>
</head>
<body style="margin: 0;">
<table class="wrapper" align="center" border="0" cellpadding="0"
cellspacing="0" width="680">
<tr>
<td class="mobileBanner" align="center" width="100%">
<p class="preheader" style="color: #ffffff;font-family: Helvetica,
Arial, sans-serif;font-size: 2px;line-height: 140%;margin-bottom:
0;margin-top: 0;display: none;">Punch-drunk in love? Go boxing with your
sweetheart. This and more great dates inside!</p>
<a href="#" target="_blank"><img class="resImage"
src="http://www.nobledesktop.com/nl-date-night/img/header.png"
width="680" alt="Date Night" style="display: block;border: none;" moz-do-
not-send="true"></a>
</td>
</tr>
<tr>
<td align="center" width="100%">
<!-- NESTED TABLE -->
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td class="mainContent" align="center" width="100%"
style="padding: 20px;border-bottom: 10px solid #e64a33;">
<h1 style="color: #69655c;font-family: Arial, Helvetica,
sans-serif;font-size: 40px;font-weight: bold;margin: 0;">This Week’s
Exclusive Picks</h1>
<!-- LISTING ONE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-
night/img/couple-boxing@2x.jpg" width="290" alt="Couple Fighting"
style="display: block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">OUT OF THE BOX DATES: BOXING
FOR TWO</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">If you
enjoyed our punny joke, you’ll love our selection of unique and out
of the box dates. They’re designed to ignite a budding relationship
or bring some new spark to an old flame. Dinner and drinks is
yesterday’s news, so get geared up and fight it out in the ring or
take it down a level with lazy river meditation. Expect to see a new and
exciting date added to the date book every week. <a class="bookLink"
href="#" target="_blank" style="color: #e74b34; font-size: 10px; font-
weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING TWO -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;" bgcolor="#eeeeee">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/beer-
bar-label@2x.jpg" width="290" alt="Open Bar" style="display: block;border:
none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">NEW BAR CRAWL PACKAGE—ALSO AS
A DOUBLE DATE!</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You asked
and we delivered! Introducing our first optional double date package, the
Couples’ New York Bar Crawl. Spend a Friday or Saturday night
exploring the nightlife in a new area with your loved one and friends.
You’ll visit five different bars in close proximity to each
other—no cabs or transportation required. Most importantly, the
first drink at every bar is on us! Check it out now for the special grab a
date price! <a class="bookLink" href="#" target="_blank" style="color:
#e74b34;font-size: 10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING THREE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/milan-
canal@2x.jpg" width="290" alt="Canal Cruise - Milan" style="display:
block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">DELUXE WEEKEND: FAR-FLUNG AND
ROMANTIC</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You two are
so busy that a 7-day work week is all too familiar. Time to de-stress and
take a weekend to remember why you work so hard. Put your routine on pause
and enjoy a short vacation to an enchanted location. Choose from over 15
exotic remote and not-so-remote locations. Weekend date prices include a
hotel for two, a bottle of wine, and a planned activity. <a
class="bookLink" href="#" target="_blank" style="color: #e74b34;font-size:
10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
首先，表格得到回应。响应性只能在某种程度上起作用。你应该使用div并给它们赋予float属性。例如
<style>
.div1 {
max-width:680px !important;
width:100% !important;
}
.div1 > img {
max-width:200px !important;
width:100% !important;
float: left;
}
.div1 > .text-div {
max-width:480px !important;
width:100% !important;
float: right;
}
.clear-fix
{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
<div class="div1">
<img src=""/>
<div class="text-div">
<h5>OUT OF THE BOX DATES: BOXING FOR TWO</h5>
<p>If you enjoyed our punny joke, you’ll love our selection of unique and out of the box dates.
They’re designed to ignite a budding relationship or bring some new spark to an old flame.
Dinner and drinks is yesterday’s news, so get geared up and fight it out in the ring or take it down a level with lazy river meditation.
Expect to see a new and exciting date added to the date book every week.</p>
</div>
</div>
不要忘记在头标记中添加此元标记
<meta name="viewport" content="width=device-width, initial-scale=1">
你可以在这里找到关于clear-fix的信息：