В AOL моя электронная почта отображается как мобильная версия, а не как версия для ПК. Я использовал «display: none», чтобы скрыть несколько изображений на мобильных устройствах, и выровнял часть текста с противоположными сторонами, и это отображается так во всех браузерах для AOL.
Не могли бы вы помочь мне понять, почему это происходит, и как я могу сделать так, чтобы моя версия для настольного компьютера отображалась в AOL так, как должна?
<!doctype html>
<html>
<head>
<title>Email</title>
<meta charset="utf-8">
<meta name="format-detection" content="date=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;}
@media screen and (max-width: 600px) {
.img-max {width: 100% !important;max-width: 100% !important;height: auto !important;}
.mobile-padding {padding: 0px !important;}
.header{font-size: 16px !important;line-height: 20px !important;}
.description {font-size: 11px !important;line-height: 15px !important;}
.mobile-sub {padding: 20px 10px 20px 20px !important;text-align: left !important;}
.header-top{font-size: 16px !important;line-height: 20px !important;text-align: right !important; padding: 0px 0px 0px 0px !important;}
.description-top {
font-size: 11px !important;
line-height: 15px !important; text-align: right !important;
padding: 0px 0px 0px 0px !important;
}
.button {
font-size: 13px !important;
}
.top-button {
float: right !important;
font-size: 13px !important;}
.mobile-hide {
display: none !important;}
.no-padding {
padding: 0px 0px 0px 0px !important;
}
.right-box {
padding: 20px 20px 20px 20px !important;
text-align: right !important;
}
}
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#ffffff" style="padding: 10px 0px 0px 0px;" class="mobile-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" bgcolor="" style="padding: 30px 0px 30px 0px; text-align: left;" class="right-box">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td align="center" valign="top" width="400">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 450px;">
<tr>
<td align="center" valign="top" style="font-weight: 300; text-decoration: none; color: #000000; font-family: Helvetica,sans-serif; text-align: left; font-size: 26px; line-height: 30px;" class="header-top">
Header
</td>
</tr>
<tr>
<td valign="top" style="text-decoration: none; color: #000000; font-family: Helvetica,sans-serif; text-align: left; font-size: 14px; line-height: 16px;" class="description-top">
Description
</td>
</tr>
<tr>
<td valign="top" style="padding: 20px 0px 0px 0px; float: left;" class="top-button">
<table border="0" cellspacing="0" cellpadding="0" class="top-button">
<tr>
<td style="border-radius: 0px; font-size: 17px; padding: 5px 20px 5px 20px; float: left;" bgcolor="#ffffff" class="top-button">
<a href="" target="_blank" style="font-family: Helvetica, sans-serif; color: #000000; text-decoration: none; border-radius: 0px; background-color: #ffffff; border: 1px solid #ffffff; display: block; font-weight: bold;">READ MORE</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="" style="padding: 0px;" class="mobile-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding: 0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" bgcolor="" style="border-radius: 0px; padding: 10px 0px 10px 0px;" class="no-padding">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" class="mobile-hide">
<a href="" target="_blank">
<img src="" width="300" border="0" style="display: block;" class="mobile-hide" alt=""></a>
</td>
<td align="center" valign="middle" width="300" class="mobile-sub" style="padding: 0px 30px 0px 30px;">
<table align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="text-align: left; padding: 0px;" width="300" class="header">
<a href="" target="_blank" style="">
Header</a>
</td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: left; padding: 0px 10px 0px 0px;" width="300" class="description">
Description
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 20px 0px 0px 0px;">
<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 5px 20px 5px 20px;" class="button">
<a href="" target="_blank" style="display: block;">READ MORE</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>