Мобильный адаптивный дизайн не работает для Outlook - PullRequest
Новая
       79

Мобильный адаптивный дизайн не работает для Outlook

0 голосов
/ 07 апреля 2020

Я работаю над дизайном шаблона электронной почты для Outlook. Нужна ваша поддержка, чтобы оптимизировать дизайн для мобильных устройств реагировать. Прикрепление изображения для справки. Я пробовал медиазапрос, но похоже, что внутренний CSS не поддерживается шаблоном электронной почты.

enter image description here

> <!DOCTYPE html>
>     <html>
>       <head>
>           <meta http-equiv=Content-Type content='text/html charset=UTF-8' />
>           <meta name=viewport content='width=device-width, initial-scale=1.0'/>
>           <style>
>     @media only screen and (max-width: 600px){
>       td { 
>       display:table-row;
>       padding-left:32px;
>       height:100%;
>       border:1px dotted red;
>       text-align:center;
>       position: relative;
>       padding: 50%; 
>       }
>       table{
>       height:100vh;
>       width: 100%!important;
>       }
>       .panel{
>           width: 100%;
>             margin-bottom: 15px;
>             overflow-y: hidden;
>             -ms-overflow-style: -ms-autohiding-scrollbar;
>             border: 1px solid #ddd;
>       }
>       .panel > .table {
>             margin-bottom: 0;
>               
>         }
>       .panel > .table > thead > tr > th,
>         .panel > .table > tbody > tr > th,
>         .panel > .table > tfoot > tr > th,
>         .panel > .table > thead > tr > td,
>         .panel > .table > tbody > tr > td,
>         .panel > .table > tfoot > tr > td {
>             white-space: nowrap;
>           display: block;
>           width:100%;
>         }
>       }
>       </style>
>       </head>
>       <body>
>           <div class='panel'>
>               <div class='heading' style = 'background-color:#0BF4CD; border-style:none;mso-line-height-rule: exactly;line-height:
> 30px;'>&nbsp;</div>
>               <div class='panel-body' style='margin: 0;padding: 0;'>
>                   <table style='width: 100%; font-size: 16px;border-collapse:collapse;' border='1' bordercolor='#A9A9A9'
> cellspacing='0' cellpadding='0'>
>                       <tbody>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px'>
>                                   <strong>Customer Impact</strong>&nbsp;
>                               </td>
>                               <td style='padding:10px 0 7px 15px'>&nbsp;
>                                   <span id='spanCustomer_Impact'>[[textarea:Customer_Impact]]</span>&nbsp;
>                           
>                               </td>
>                           </tr>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px'>
>                                   <strong>Notes</strong>&nbsp;
>                           
>                               </td>
>                               <td style='padding:10px 0 7px 15px'>&nbsp;
>                               
>                                   <span id='spanReason_for_Notification'>[[textarea:Reason_for_Notification]]</span>&nbsp;
>                           
>                               </td>
>                           </tr>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px' rowspan='4'>
>                                   <strong>Timestamp</strong>&nbsp;
>                           
>                               </td>
>                               <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>&nbsp;
>                               
>                                   <strong>Notification Date/Time (EST):</strong>&nbsp;
>                               
>                                   <span id='spanNotification_Time'>[[date:Notification_Time]]</span>
>                               </td>
>                               <tr style='color:#000000'>
>                                   <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>&nbsp;
>                                   
>                                       <strong>Start Date/Time (EST):</strong>&nbsp;
>                                   
>                                       <span id='spanStart_Date'>[[date:Start_Date]]</span>
>                                   </td>
>                               </tr>
>                               <tr style='color:#000000'>
>                                   <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>&nbsp;
>                                   
>                                       <strong>End Date/Time (EST):</strong>&nbsp;
>                                   
>                                       <span id='spanEnd_Date'>[[date:End_Date]]</span>
>                                   </td>
>                               </tr>
>                               <tr style='color:#000000'>
>                                   <td style='padding:7px 0 7px 15px'>&nbsp;
>                                   
>                                       <strong>Expected End Date/Time (EST):</strong>&nbsp;
>                                   
>                                       <span id='spanExpected_End_Time'>[[date:Expected_End_Time]]</span>&nbsp;
>                               
>                                   </td>
>                               </tr>
>                           </tr>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px'>&nbsp;
>                               
>                                   <strong>Expected Duration</strong>&nbsp;
>                           
>                               </td>
>                               <td style='padding:10px 0 7px 15px' >&nbsp;
>                               
>                                   <span id='spanDuration'>[[string:Duration]]</span>
>                               </td>
>                           </tr>
>                       </tbody>
>                   </table>
>               </div>
>               <div class='footer' style = 'background-color:#0BF4CD; border-style:none;mso-line-height-rule: exactly;line-height:20px'>&nbsp;</div>
>           </div>
>       </body>
>     </html>

Поскольку мы знаем только inline css работа с мировоззрением. Есть ли способ для мобильного адаптивного дизайна для Outlook и как это реализовать? Может кто-нибудь помочь мне с этим дизайном? Я не очень хорош в дизайне. Мне нужна твоя поддержка.

1 Ответ

0 голосов
/ 08 апреля 2020

Вы правильно поняли использование таблиц, поскольку рабочий стол Outlook на Windows не поддерживает операции с плавающей точкой. Тем не менее, для мобильного Outlook, я предполагаю, что вы не говорите о рабочем столе Outlook. В этом случае медиа-запросы должны работать, но только если CSS является приемлемым (однако, некоторые мобильные телефоны также не используют встроенный CSS, например, Gmail, используемый через IMAP).

Вы можете попробовать https://www.caniemail.com/ для уточнения c рекомендаций о том, что необходимо.

Для общего подхода вместо адаптивного подхода, использующего медиазапросы, лучше всего полагаться только на встроенные CSS , Возможно, вы захотите попробовать подход с использованием гибридной жидкости, как подробно описано здесь: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Существенные элементы должны плавать с использованием div-оболочки: <div style="display:inline-block;width:100%;max-width:300px;vertical-align:top">

Там также является запасным вариантом для Outlook, который не поддерживает max-width следующим образом: 

        <!--[if (gte mso 9)|(IE)]>
        <table width="100%">
        <tr>
        <td width="50%" valign="top">
        <![endif]-->
        [column to go here]
        <!--[if (gte mso 9)|(IE)]>
        </td><td width="50%" valign="top">
        <![endif]-->
        [column to go here]
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
...