移动响应式设计不适用于 outlook
[英]Mobile responsive design not working for outlook
问题描述
I am working on an email template design for outlook.
我正在为 outlook 设计 email 模板。 Need your support to optimize the design for mobile responsive.需要您的支持来优化移动响应设计。 Attaching the image for the reference.附上图片以供参考。 I tried media query but it looks like internal CSS doesn't supported by the email template.我尝试了媒体查询，但看起来 email 模板不支持内部 CSS。
> <!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;'> </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>
> </td>
> <td style='padding:10px 0 7px 15px'>
> <span id='spanCustomer_Impact'>[[textarea:Customer_Impact]]</span>
>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
> <strong>Notes</strong>
>
> </td>
> <td style='padding:10px 0 7px 15px'>
>
> <span id='spanReason_for_Notification'>[[textarea:Reason_for_Notification]]</span>
>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px' rowspan='4'>
> <strong>Timestamp</strong>
>
> </td>
> <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>
>
> <strong>Notification Date/Time (EST):</strong>
>
> <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'>
>
> <strong>Start Date/Time (EST):</strong>
>
> <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'>
>
> <strong>End Date/Time (EST):</strong>
>
> <span id='spanEnd_Date'>[[date:End_Date]]</span>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding:7px 0 7px 15px'>
>
> <strong>Expected End Date/Time (EST):</strong>
>
> <span id='spanExpected_End_Time'>[[date:Expected_End_Time]]</span>
>
> </td>
> </tr>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
>
> <strong>Expected Duration</strong>
>
> </td>
> <td style='padding:10px 0 7px 15px' >
>
> <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'> </div>
> </div>
> </body>
> </html>
As we know only inline css work with outlook.我们知道只有内联 css 与 outlook 一起使用。 Is there any way for mobile responsive design for outlook and how to implement that? outlook 的移动响应式设计有什么方法吗？如何实现？ Can someone help me out for this design?有人可以帮我做这个设计吗？ I'm not much good in design.我不太擅长设计。 I need your support this.我需要你的支持。
1 个解决方案
解决方案1
0 2020-04-08 00:07:20
You've got the right idea using tables, because Outlook desktop on Windows does not support floats.您使用表格的想法是正确的，因为 Windows 上的 Outlook 桌面不支持浮点数。 However, for Outlook mobile, I assume you are not talking about Outlook desktop.但是，对于 Outlook 移动设备，我假设您不是在谈论 Outlook 桌面设备。 In that case, media queries should work, but only if the CSS is acceptable (however, some mobiles do not use embedded CSS either, such as Gmail utilised through IMAP).在这种情况下，媒体查询应该可以工作，但前提是 CSS 是可接受的（但是，某些手机也不使用嵌入式 CSS，例如通过 IMAP 使用的 Gmail）。
You can try https://www.caniemail.com/ for specific advice on what is needed.您可以尝试https://www.caniemail.com/以获取有关所需内容的具体建议。
For the general approach, instead of a responsive approach that uses media queries, its best to rely only on inline CSS.对于一般方法，最好仅依赖内联 CSS，而不是使用媒体查询的响应式方法。 You might like to try the hybrid fluid approach, as detailed here: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919您可能想尝试混合流体方法，详见此处： https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
The essential elements are to float using a div wrapper: <div style="display:inline-block;width:100%;max-width:300px;vertical-align:top">基本元素是使用 div 包装器浮动： <div style="display:inline-block;width:100%;max-width:300px;vertical-align:top">
There is also a fallback for Outlook, which does not support max-width as follows: Outlook还有一个fallback，它不支持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]-->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.