0
私は簡単な2列（デスクトップ画面で）HTML電子メールを私はマニュアルから得たコードに基づいて設定しました。しかし、iPhone 5（iPhone 6以上を試していない）で見たときに、Android携帯電話で正しく表示された電子メールをテストしたところ、必要に応じて2列表示が1列表示に変更されましたそれに応じて2列表示が1列表示に変わらないように応答する。私の反応するHTML電子メールは反応しません
以下のCSS/HTMLを参照してください。私はまた、コードペンを設定しました： 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/[email protected]) !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/[email protected]" 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-
[email protected]" 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-
[email protected]" 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>
こんにちは@AnumR、あなたの答えをありがとう。しかし、DIVタグを使用しないと、レイアウトにTABLESを使用すべきHTML EMAILの一般的に受け入れられているルールに矛盾します。私はMAILCHIMPとCAMPAIGN MONITORのドキュメントを読んできました。それらはすべてTABLESの使用を強調しています。 – Ben