Я создал html электронное письмо с отзывчивым / мобильным дизайном. Это работало хорошо почти на каждом клиенте и компьютере, а также в Outlook.
мой заголовок:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
head>
meta charset="UTF-8">
meta http-equiv="Content-Type" content="text/html charset=UTF-8"/>
meta content="width=device-width, initial-scale=1" name="viewport">
meta name="x-apple-disable-message-reformatting">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta content="telephone=no" name="format-detection">
title>test</title>
!--[if (mso 16)]>
style type="text/css">
a {text-decoration: none;}
/style>
![endif]-->
!--[if gte mso 9]><style>sup { font-size: 100% !important; }
/style>
![endif]-->
style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:14px!important; line-height:150%!important } h1 { font-size:12px!important; text-align:center; line-height:120%!important } h2 { font-size:12px!important; text-align:center; line-height:120%!important } h3 { font-size:12px!important; text-align:center; line-height:120%!important } h1 a { font-size:12px!important } h2 a { font-size:12px!important } h3 a { font-size:12px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:14px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:11px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:13px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:inline-block!important } a.es-button { font-size:16px!important; display:inline-block!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!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;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
.es-button-border:hover a.es-button {
background:#00418a!important;
border-color:#00418a!important;
}
.es-button-border:hover {
background:#00418a!important;
border-style:solid solid solid solid!important;
border-color:#00418a #00418a #00418a #00418a!important;
}
td .es-button-border-1:hover {
border-style:solid solid solid solid!important;
background:#00418a!important;
border-color:#00418a #00418a #00418a #00418a!important;
}
td .es-button-border:hover a.es-button-2 {
background:#00418a!important;
border-color:#00418a!important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/style>
/head>
Я стер <теги. </p>
Если я деактивируйте опцию автоподбора содержимого в настройках приложения электронной почты Samsung, электронная почта будет отображаться отзывчиво, как и должна.
Кто-то знает эту проблему или у кого-нибудь есть идея решить эту проблему? Это ошибка?
Я смог проверить ее только на iPhone и Samsung galaxy s10 (Android 10)
Спасибо
Эрик