У меня возникла проблема, когда я вставляю html-файл в виде текста в Outlook 2013. Представление почты в порядке. Просто кажется, что директивы, которые я дал, основаны на том, что мобильные или настольные компьютеры, кажется, не применяются, когда яизменить размер браузера при просмотре Outlook.Функция show hide работает нормально, если показывает html-файл в обычном окне браузера за пределами Outlook 2013.
Я пробовал это:
<style>
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
.ReadMsgBody {width: 100%;}
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
span.show { display: none; }
/* End reset */
@media screen and (max-width: 480px){
*[class="container"] { width: 320px !important; padding:0px !important}
*[class="mobile-column"] {display: block;}
*[class="mob-column"] {float: none !important;width: 100% !important;}
*[class="mobile-padding"] {padding-left:10px !important;padding-right:10px !important;}
*[class="hide"] {display:none !important;}
*[class="100p"] {width:100% !important; height:auto !important;}
*[class="show"] {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
}
}
</style>
<table border="0" cellpadding="0" cellspacing="0" class="mobile-padding" bgcolor="#EFEFEF" style="background-color: #EFEFEF; margin: 0; padding: 0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="100p" width="600">
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="right" style="font-size:11px; color:#333333; font-family:Arial, Helvetica, sans-serif;">Email looking strange? <a href="##" style="color:#ad2f70; text-decoration:none;">View it in browser</a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="100p" width="600">
<tr>
<td height="20"></td>
</tr>
</table>
<table width="600" cellpadding="10" cellspacing="0" class="100p" border="0" bgcolor="#E4E4E5">
<tr>
<td align="left" style="font-size:18px; color:#333333; font-family:Arial, Helvetica, sans-serif;">Hello!<span class="hide"><br /><br />This text is viewable on a larger screen.</span>
<span class="show" style="overflow:hidden; float:left; display:none; line-height:0px;"><br />This is hidden on desktop!</span>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="100p" width="600">
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
</table>
Это пример кода, который я взял израбочего демона я видел онлайн, но когда я встраиваюсь в Outlook 2013 и отправляю тестовое письмо, это не применяется.Я просто открываю почту и изменяю размер окна браузера до размера мобильного телефона, но ни один контент не подходит для мобильных устройств.С точки зрения мобильности для электронных писем, нужно ли мне тестировать на реальном устройстве.Изменится не отображается при изменении размера окна на рабочем столе.
Спасибо, и любые предложения будут очень признательны.