이메일 콘텐츠 최대 너비

[Bcat]

현재 사용자가 다른 사용자에게 텍스트를 보내거나 멘션할 때, 해당 사용자에게 이메일이 발송됩니다.
이메일 내용은 이메일 창을 100% 차지하도록 표시됩니다.

이메일의 최대 너비를 설정하는 방법은 무엇인가요? 예를 들어 650px 등?

다음과 같이 시도해 보았지만 작동하지 않았습니다!

[simon]

@Bcat

이메일의 최대 폭을 어떻게 설정하나요! 예를 들어 650px처럼요?

max-width가 CSS로 설정된 테이블 안에 %{email_content} 태그를 감싸는 이메일 템플릿을 만들어서 이메일의 최대 폭을 설정할 수 있습니다. Outlook에서 표시되는 이메일의 폭을 제한하려면 <!--[if mso]> 태그로 감싸진 고정 폭 테이블도 추가해야 합니다.

여기에는 내용을 최대 600px로 제한하는 기본 이메일 템플릿이 있습니다. 이 템플릿을 사용하려면 로고 이미지 URL을 사이트 로고의 URL로 반드시 교체해야 합니다. 또한 href 속성의 값을 사이트 URL로 교체하세요. 로고 이미지의 alt 속성은 사이트에 적절한 설명이 되도록 설정해야 합니다.

템플릿에 사이트 로고가 포함되어 있으므로 apply custom styles to digest(다이제스트에 사용자 정의 스타일 적용) 사이트 설정을 비활성화해야 합니다. 이를 수행하지 않으면 사이트에서 전송되는 요약 이메일 상단에 로고가 두 개 표시됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
    body, table, td, th, h1, h2, h3 {
        font-family: Helvetica, Arial, sans-serif !important;
    }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="padding: 10px 0 30px 0;">
            <!--[if gte mso 9]>
            <table width="600" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td><![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                   style="max-width: 600px;border-collapse: collapse;">
                <tr>
                    <td style="padding: 20px 15px 20px 15px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center">
                                    <a href="https://forum.example.com">
                                        <img src="https://your-site-logo-url"
                                             alt="Your site name" width="150" height="40"
                                             style="display: block;"/>
                                    </a>
                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0 15px 0 15px;">
                        <hr style="background-color: #ddd; height: 1px; border: 1px;">
                    </td>
                </tr>
                <tr>
                    <td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
                        %{email_content}
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]></td></tr></table><![endif]-->
        </td>
    </tr>
</table>

가장 인기 있는 이메일 클라이언트에서 이메일 테스트 서비스를 사용하여 이 템플릿을 테스트했습니다:

iPad (Retina) (iOS 13.1):

Gmail App (Android 6.0):

iPhone 6 Plus:

Outlook.com: